Triggering bootstrap modal on form submit and not on click

Question

I want to trigger a bootstrap modal on submit and not on click as it is programmed to do by default. This is my form and the button that triggers the modal :

  <form name="signup-form" action="http://formspree.io/davidgeismar@wetennis.fr" id="conversion_form" method="POST">
                            <input id="email-input" class="signup-input" type="email" name="email_address" value="" placeholder="Laisse ton mail et reçois le coupon..." title="Please enter a valid email address." required>
                            <button type="submit" class="submit-btn"data-toggle="modal" data-target="#myModal">GO</button>
                        </form>

and this is the modal :

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

I tried this as was suggested in a post :

  $("#myModal").on("show.bs.modal", function(e){
    e.stopPropagation();
  })

but this is not working.

What I should do is only trigger the modal when the form is actually submitted. This is after this bunch of JS code :

$("#conversion_form").on("submit", function(e){
       e.preventDefault();
       var $this = $(this);
       var email = $('#email-input').val();
       $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                method:"POST",
                dataType: "json", // La méthode indiquée dans le formulaire (get ou post)
                data: {message: email}, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
                success: function(data, textStatus, xhr) {
                    if(xhr.status==200)
                        alert('Nous vous tiendrons au courant de nos dernières actu ! \n Wefoot');
                    $('#email-input').val('');
                    // $('#myModal').popover('show');

                }
            });

    })

i can not under stand "I want to trigger a bootstrap modal on submit " — Parth Trivedi, Dec 15 '15 at 09:01
its better if you show the log or, the error message your getting(if you are getting any) — JGCW, Dec 15 '15 at 09:03
By default the twitter bootstrap modal is triggered on click on the element. I want to prevent the modal from being triggered on click on the element but rather at the end of the form submission — David Geismar, Dec 15 '15 at 09:11

score 0 · Answer 1 · edited May 23 '17 at 11:44

If you want to show your modal after the form has completed the submit process you could just add this code in your success function:

$("#conversion_form").on("submit", function(e){
   e.preventDefault();
   var $this = $(this);
   var email = $('#email-input').val();
   $.ajax({
            url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
            method:"POST",
            dataType: "json", // La méthode indiquée dans le formulaire (get ou post)
            data: {message: email}, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
            success: function(data, textStatus, xhr) {
                if(xhr.status==200)
                    alert('Nous vous tiendrons au courant de nos dernières actu ! \n Wefoot');
                $('#email-input').val('');
                $('#myModal').modal('show'); // Add this and it will open the modal 

            }
        });

});

Or if you want to do it before the form submits then just add

$('#myModal').modal('show');

before the ajax call. You can find more info here: https://stackoverflow.com/a/13183713/2911633

Thanks I understand what you say, but I also want to stop the modal from being triggered on simple click on the submit button which it is doing right now — David Geismar, Dec 15 '15 at 09:07
Like @anshulix said you need to remove data-toggle="modal" from you submit button and the model won't show when you click the button but if you add the code from his example to your ajax success function it will open once the form has completed the submit process. — Igor Ilic, Dec 15 '15 at 09:20

score 0 · Accepted Answer · answered Dec 15 '15 at 09:12

You need to remove data-toggle="modal" data-target="#myModal" and trigger your modal manually, you could use this in your code

First initialize your modal to false so that it doesn't open up

$('#myModal').modal({ show: false})`

in submit method write below code

$('#myModal').modal('show');

Triggering bootstrap modal on form submit and not on click

2 Answers2