open modal bootstrap on submit form

Question

how can I open a modal when the user has validated the form ? S'inscrire

    <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h3 class="modal-title">Merci !</h3>
          </div>
        </div>
      </div>
    </div>

Answer 1

You can use the modal id or class to open it when the user clicks on submit button. Lets say you have this HTML

<form id="submit-button">
    //form components
</form>

Then you can write this JQuery code:

//trigger when form is submitted
$("#submit-button").submit(function(e){
    $('#registration').modal('show');
    return false;
});

The $('#registration').modal('show'); will display the modal and return false; prevent the form to post the data which will stop the page to reload. Or, you can also do this

$(document).ready(function() {
  $('#submit-button').on('submit', function(e){
      $('#registration').modal('show');
      e.preventDefault();
  });
});

e.preventDefault(); will stop the page from the page reload.

Answer 2

You can add this to to your function when you the form is validated:

$('#registration').modal({
        show: 'false',
        backdrop: 'static',
        keyboard: false
    });

• Keyboard false means when you press escape the modal won't disappeared.
• Setting the backdrop to static means when people click with their mouse outside of the modal. The modal won't close.

EDIT

if ($("form button").valid()) { 
       $('#registration').modal({
            show: 'false',
            backdrop: 'static',
            keyboard: false
            });
};

Answer 3

您可以在验证成功后添加：

$("#registration").modal('show');

Answer 4

I would use an Ajax solution to submit the form without refreshing the page.

You could even update the modal response based on the outcome of the request.

 $("#ajaxform").submit(function(e) { var url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#ajaxform").serialize(), // serializes the form's elements. success: function(data) { //if request successful $(".modal-title").text('Request successful'); $('#registration').modal('show'); }, error: function(data) { //if request unsuccessful $(".modal-title").text('Request failed'); $('#registration').modal('show'); } }).done(function() { //finally, reinitialise modal text back to default 'merci' $(".modal-title").text('merci'); }); e.preventDefault(); // avoid to execute the actual submit of the form. }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group"> First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/> <button type="submit" class="btn btn-default">submit</button> </form> <div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <h3 class="modal-title">Merci !</h3> </div> </div> </div> </div>