jQuery: Open Bootstrap Modal on Form Submit

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.