Hana Piers

This simple snippet shows how to open Bootstrap Modal on form submission using jQuery. Bootstrap has provided functions you can use to manually manipulate the modal. $('#myModal').modal('toggle'); $('#myModal').modal('show'); $('#myModal').modal('hide'); Here is an example form <form action="/process" onsubmit="openModal()" id="myForm"> Call the function manually function openModal(){ $('#myModal').modal('show'); return false; } Using the jQuery  Event Listener $('#myForm').on('submit', function(e){ $('#myModal').modal('show'); }); See Demo in CodePen See the Pen Bootstrap Modal on Form Submit by Hana Piers ( @hanapiers ) on CodePen .

index.html <!-- putting the link in data-href instead of href removes the js error "Uncaught Error: Syntax error, unrecognized expression: /path/to/file --> <a class="btn btn-primary" data-href="modal_content.html" data-toggle="modal" href="#">Show Modal</a> modal_content.html <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal Body </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" type="button"> Close </button> <button class="btn btn-primary" type="button"> Save Ch...