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>

Solution

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.