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