Prevent Bootstrap Model from Closing after Submit Button

Question

I want to prevent my Modal window to close after I push submit Form button.

I tried a different kind of ways jquery/credform/javascript etc and nothing gave me the result I want.

Inside my Modal, as you can see I have a Form with different things. All fields are requested by my PHP server.

Please help me out with this. I want it after I push submit to remain open so the user that completes the form get's a message inside a box that I made there

$('#myModal').on('hidden.bs.modal', function() {
  this.modal('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Comanda prin Email</h4>

        </div>

        <div class="modal-body">

          <?php include('forms.php'); ?>

            
<div class="container">

              <form id="contact" action="<?= htmlspecialchars($_SERVER["PHP_SELF"]) ?>" method="post">

                <div class=""><p style="text-align: center;">Dupa plasarea comenzi in maximum 24 ore ve-ti fi contactat Telefonic pentru confirmarea acesteia!!!</p></div>
                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Nume Produs" type="text" name="numeprodus" value="<?= $numeprodus ?>" tabindex="1" autofocus>
                  <span class="error"><?= $numeprodus_error ?></span>
                </fieldset>
                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Marimea" type="text" name="marime" value="<?= $marime_produs ?>" tabindex="2" autofocus>
                  <span class="error"><?= $marime_error ?></span>
                </fieldset>
                <fieldset>

                  <sup>*</sup>
                  <input placeholder="Numele" type="text" name="nume" value="<?= $nume ?>" tabindex="3" autofocus>

                  <span class="error"><?= $nume_error ?></span>

                </fieldset>

                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Prenumele" type="text" name="prenume" value="<?= $prenume ?>" tabindex="4" autofocus>
                  <span class="error"><?= $prenume_error ?></span>
                </fieldset>
                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Adresa" type="text" name="adresa" value="<?= $adresa ?>" tabindex="5" autofocus>
                  <span class="error"><?= $adresa_error ?></span>
                </fieldset>
                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Oras" type="text" name="oras" value="<?= $oras ?>" tabindex="6" autofocus>
                  <span class="error"><?= $oras_error ?></span>
                </fieldset>
                <fieldset>
                  <sup>*</sup>
                  <input placeholder="Cod Postal" type="text" name="codpostal" value="<?= $codpostal ?>" tabindex="7" autofocus>
                  <span class="error"><?= $codpostal_error ?></span>
                </fieldset>
                <fieldset>

                  <sup>*</sup>
                  <input placeholder="Email" type="text" name="email" value="<?= $email ?>" tabindex="8">

                  <span class="error"><?= $email_error ?></span>

                </fieldset>

                <fieldset>

                  <sup>*</sup>
                  <input placeholder="Numar Telefon" type="text" name="telefon" value="<?= $telefon ?>" tabindex="9">

                  <span class="error"><?= $telefon_error ?></span>

                </fieldset>

                <fieldset>

                  <textarea value="<?= $message ?>" name="message" tabindex="10">

                  </textarea>

                </fieldset>

                <fieldset>
                    <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                </fieldset>
                <div class="success"><?= $success ?></div>

              </form>

            </div>

        </div>

        <div class="dv-atentionare"><p class="dv-att-p1">Atentie!</p><p class="dv-att-p2">Aveti la dispozitie 48 ore de la plasarea comenzi pentru a o putea anula!</p></div>

        <div class="modal-footer">

         <input  class="btn btn-default">

         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

    </div>

  </div>

</div>

Thank you in advance!

You want to prevent modal closing and also prevent form submit? — Vipin Kumar, Nov 22 '17 at 19:42
When someone push submit. The form is send and a message should appear on the modal but my model closes up and my page goes at the top — Andrei CCL, Nov 22 '17 at 19:49
That's because your page is posted back to server and is now reloaded. You have two solutions for this. Let me edit it in my answer. — Vipin Kumar, Nov 22 '17 at 19:50
@AndreiCCL when you submit the form the page gets reloaded you cant prevent it from hidding. submit form using ajax then you can prevent your modal from hidding — Abid Nawaz, Nov 22 '17 at 19:51
i have done it here https://fiddle.jshell.net/marwat/735yvkb0/ — Abid Nawaz, Nov 22 '17 at 20:11
i have submitted the form using jquery ajax. you can customize according to your requirments. — Abid Nawaz, Nov 22 '17 at 20:13
Now when I load the page it opens the form automatically and I want it to open on a button press that I already installed in my HTML file. And still when I press submit or even click the fields. the modal dissapears — Andrei CCL, Nov 22 '17 at 20:16

Vipin Kumar · Answer 1 · 2017-11-22T19:55:05.743

Ok, so there are two solutions for this.

Use JQuery AJAX to submit form, and prevent default form behaviour. Link
Reopen the Modal, when form is returned from server. I might not be able to give you any PHP code for this but I have done this in Asp.Net MVC.

When you post your data to PHP, return some flag from there. Then you can use that flag to turn following script on/off.

// PHP if($some_flag == true)
<script>
    $(document).ready(function(){
      $('#myModal').modal('show');
    })
</script>
// PHP endif

score 0 · Answer 2 · answered Nov 22 '17 at 19:40

0

According to the docs data-dismiss="modal" is to dismiss the modal when the button is clicked.

Removing this attribute should stop the modal from closing when the button is clicked.

answered Nov 22 '17 at 19:40

Get Off My Lawn

27,770
29
134
260

You should also send the form via ajax. Without sending it via ajax, it is going to reload the page or redirect to a new page. – Get Off My Lawn Nov 22 '17 at 19:52

Prevent Bootstrap Model from Closing after Submit Button

2 Answers2