Keeping Bootstrap modal open after form submission

Keeping Bootstrap modal open after form submission

I have a form in a Bootstrap 4 modal and am trying to replace this modal form with a thank you message within the same modal, but the modal keeps closing after the submit button is clicked. I tried the following, but it's not working.

  1. <button type="submit" class="btn btn-primary" onclick="$('#formModal').modal({'backdrop': 'static'});" >Submit</button>

The goal is to submit the data to our db when the submit button is clicked and then hide the form and display a thank you within the same modal. Here's the basics of the code for the modal:

  2. <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
  3.   <div class="modal-dialog" role="document">
  4.     <div class="modal-content">
  5.       <div class="modal-header">
  6.         <h5 class="modal-title" id="formModalLabel">Client Add Form</h5>
  7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  8.           <span aria-hidden="true">×</span>
  9.         </button>
  10.       </div>
  11.       <div class="modal-body showform" id="formBody">
  12.         <iframe name="formSubmitFrame" id="formSubmitFrame" style="display:none;" width="0" height="0"></iframe>
  13.         <form action="xxxxxxxxxxxxxxxx" method="post" target="formSubmitFrame" class="needs-validation" role="form" id="form">
  14.           <fieldset>
  15.             ...form fields...
  16.           <div class="form-group">
  17.             <button type="submit" class="btn btn-primary" onclick="$('#formModal').modal({'backdrop': 'static'});" >Submit</button>
  18.           </div>
  19.           </fieldset>
  20.         </form>
  21.       </div>
  22.       <div class="modal-body showThankYou" id="showThankYou" style="display:none">
  23.         <p>Thank you. Your cliuent has been added.</p>
  24.       </div>
  25.       <div class="modal-footer">
  26.       </div>
  27.     </div>
  28.   </div>
  29. </div>