Bootstrap Modal before form Submit

Question

I'm new to Modals, I have a Form and when the user clicks submit, It will show a Modal confirming if the user wants to submit, the modal also contains the user input from the form fields. I searched all over the internet but can't find the right one on my needs. And all I see is that they tag the click event to open modal on a a link. i have a input type submit. Can you give examples or ideas? Thanks! Here's my sample form.

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>

Answer 1

So if I get it right, on click of a button, you want to open up a modal that lists the values entered by the users followed by submitting it.

For this, you first change your input type="submit" to input type="button" and add data-toggle="modal" data-target="#confirm-submit" so that the modal gets triggered when you click on it:

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

Next, the modal dialog:

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

Lastly, a little bit of jQuery:

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').text($('#lastname').val());
     $('#fname').text($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});

You haven't specified what the function validateForm() does, but based on this you should restrict your form from being submitted. Or you can run that function on the form's button #submitBtn click and then load the modal after the validations have been checked.

DEMO

Answer 2

You can use browser default prompt window. Instead of basic <input type="submit" (...) > try:

<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>

Answer 3

$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});

Answer 4

It is easy to solve, only create an hidden submit:

<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >

with jQuery you click the submit:

$("#submitCadastro").click(function(){
    if($("#checkDocumentos").prop("checked") == false){
        //alert("Aceite os termos e condições primeiro!.");
        $("#modalERROR").modal("show");
    }else{
        //$("#formCadastro").submit();
        $("#submitCadastroHidden").click();                     
    }
});

Answer 5

I noticed some of the answers were not triggering the HTML5 required attribute (as stuff was being executed on the action of clicking rather than the action of form send, causing to bypass it when the inputs were empty):

1. Have a <form id='xform'></form> with some inputs with the required attribute and place a <input type='submit'> at the end.
2. A confirmation input where typing "ok" is expected <input type='text' name='xconf' value='' required>
3. Add a modal_1_confirm to your html (to confirm the form of sending).
4. (on modal_1_confirm) add the id modal_1_accept to the accept button.
5. Add a second modal_2_errMsg to your html (to display form validation errors).
6. (on modal_2_errMsg) add the id modal_2_accept to the accept button.
7. (on modal_2_errMsg) add the id m2_Txt to the displayed text holder.

8. The JS to intercept before the form is sent:

   $("#xform").submit(function(e){
       var msg, conf, preventSend;
   
       if($("#xform").attr("data-send")!=="ready"){
           msg="Error."; //default error msg
           preventSend=false;
   
           conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");
   
           if(conf===""){
               msg="The field is empty.";
               preventSend=true;
           }else if(conf!=="ok"){
               msg="You didn't write \"ok\" correctly.";
               preventSend=true;
           }
   
           if(preventSend){ //validation failed, show the error
               $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
               $("#modal_2_errMsg").modal("show");
           }else{ //validation passed, now let's confirm the action
               $("#modal_1_confirm").modal("show");
           }
   
           e.preventDefault();
           return false;
       }
   });
   

`9. Also some stuff when clicking the Buttons from the modals:

$("#modal_1_accept").click(function(){
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
});

$("#modal_2_accept").click(function(){
    $("#modal_2_errMsg").modal("hide");
});

Important Note: So just be careful if you add an extra way to show the modal, as simply clicking the accept button $("#modal_1_accept") will assume the validation passed and it will add the "ready" attribute:

• The reasoning for this is that $("#modal_1_confirm").modal("show"); is shown only when it passed the validation, so clicking $("#modal_1_accept") should be unreachable without first getting the form validated.