Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

David Orizu's avatar

Javascript show modal after form have been submitted not on form submit

Hello Everyone I'm trying to make my bootstrap modal show after my form have been saved and not on form submit how do I go about it? Here is my code

    <form action="/withdrawdone" method="post" onsubmit="openModal()" id="myForm">
    @csrf
        <div class="row">
            <div class="col-md-4">
              <label for="currency_name" class="form-label"><strong>Currency</strong></label>
              <select name="choice" class="form-control selectpicker" required  id="purpose" required>
                  <!-- <option value="" selected disabled>Select Currency</option> -->
                  <option value="btc" selected>Bitcoin</option>
                  <option value="usd">USD</option>
              </select>

            </div>
            <div class="col-md-4">
              <label for="withdrawn_cash" class="form-label"><strong>Amount</strong></label>
              <input type="text" name="withdrawn" id="withdrawn_cash" class="form-control" placeholder="Enter Amount" required>
            </div>
</div>
<br>

        <div class="form-group">
            <button type="submit" class="btn btn-kot">Withdraw</button>
        </div>
    </form>

<!--Awaiting Verification Modal -->
<div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body p-5" align="center">
         <h3>Awaiting Withdrawal Verification and Confirmation.</h3>
         <h5>Check your email for more details</h5>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
  $('#myForm').on('submit', function(e){
  $('#awaitModal').modal('show');
  e.preventDefault();
});
</script>

The modal shows on form submit quite alright but I want the modal to come out after all the details in the form has been saved and let it remain on the page asin let the modal not just load and go out of the page.

0 likes
3 replies
SilenceBringer's avatar

@david orizu I do not see where you save the form. What do you use for it? $.ajax?

If so - $.ajax has success callback. move $('#awaitModal').modal('show'); into success callback

Sinnbeck's avatar

You will need to save the form using ajax to know when it has been submitted. Or you can perhaps use a session flash to show some element that triggers the modal

Please or to participate in this conversation.