Twitter Bootstrap Question posted in

Twitter bootstrap – Display modal bootstrap before call to action

My HTML code is like this : 

<form action="form2_action.php" method="post">
    <table>
        <tr>
            <td>First Name </td>
            <td>:</td>
            <td><input type="text" id="first_name" name="first_name" required></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>:</td>
            <td><input type="text" id="last_name" name="last_name" required></td>
        </tr>
        <tr>
            <td>Age</td>
            <td>:</td>
            <td><input type="text" id="age" name="age" required></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><input type="submit" value="Submit" id="submit"></td>
        </tr>
    </table>
</form> 


<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
            </div>

            <div class="modal-body">
                <table style="width:100%">
                    <tr>
                        <td style="width:30%">First Name</td>
                        <td height top="40" style="width:70%" id="first_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Last Name</td>
                        <td height="40" id="last_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td height="40" id="age_modal"></td>
                    </tr>                 
                </table>        

                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>  
            </div>
        </div>
    </div>
</div>

My Javascript code is like this : 

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">

<script type="text/javascript">
    $(document).on("click", "#submit", function () {
        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;

        if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
            $("#confirm-save").modal("show");
            $('#first_name_modal').text(first_name_modal);
            $('#last_name_modal').text(last_name_modal);
            $('#age_modal').text(age_modal);
        }
    });

</script>

Demo is like this : http://jsfiddle.net/oscar11/wjo8yjhb/

When I input data and click button submit, The system directly call action form2_action.php. I want before system call to action, system display modal bootsrap first.

So, How to display modal bootstrap before call to action?

Thank you very much

Tags:

2

Answers


  1. 0

    The form action take always the precedence, you need to avoid this using te preventDefaul function like so:

    $(document).on("click", "#submit", function (e) {
        e.preventDefault();
        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;

        if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
            $("#confirm-save").modal("show");
            $('#first_name_modal').text(first_name_modal);
            $('#last_name_modal').text(last_name_modal);
            $('#age_modal').text(age_modal);
        }
    });

    I have also update your fiddel so this works fine for you! Have a nice day.

    Login or Signup to reply.
  2. 0

    The second behavior you describe has the same problem as thefirst one. You are still clicking on the document so you need here also to do the following:

    $('#saveBtn').on('click',function(e){
         e.preventDefault()
      //here has to come the code to submit this form 
})

    I have update the fiddle again for you.

    It is possible to do it But I really don’t understand why you want to do this, in fact you are only showing the user input in the modal.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search