Question

54

Pop up Bootstrap modal on success AJAX call

rated 0 times [ 61] [ 7] / answers: 1 / hits: 28570 / 9 Years ago, wed, september 9, 2015, 12:00:00

I'm using Formkeep to do my forms, using AJAX to submit an email to their servers. What I'm getting stuck on is how do I pop up a bootstrap modal saying 'thanks' on the successful sending of an email address using AJAX.

Here's the script running the AJAX.

<script>

    $(function() {

      $('#beta-signup').submit(function(event) {

        event.preventDefault();



        var formEl = $(this);

        var submitButton = $('input[type=submit]', formEl);



        $.ajax({

          type: 'POST',

          url: formEl.prop('action'),

          accept: {

            javascript: 'application/javascript'

          },

          data: formEl.serialize(),

          beforeSend: function() {

            submitButton.prop('disabled', 'disabled');

          }

        }).done(function(data) {

          submitButton.prop('disabled', false);

        });

      });

    });

</script>

I'm a beginner at AJAX requests so any help will be greatly appreciated.

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jack

Add To Favorites

Follow

Total Points: 557

Total Questions: 96

Total Answers: 80

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 9 Years ago bradleymoisesy · Accepted Answer

<script>

    $(function() {

      $('#beta-signup').submit(function(event) {

        event.preventDefault();



        var formEl = $(this);

        var submitButton = $('input[type=submit]', formEl);



        $.ajax({

          type: 'POST',

          url: formEl.prop('action'),

          accept: {

            javascript: 'application/javascript'

          },

          data: formEl.serialize(),

          beforeSend: function() {

            submitButton.prop('disabled', 'disabled');

              }

        success: function(data) {

           $('#your-modal').modal('toggle');

          }

        }).done(function(data) {

          submitButton.prop('disabled', false);

        });

      });

    });

</script>

After your done call back, add:

 success: function(data) {

               $('#your-modal').modal('toggle');

              }

And make sure your modal has similar attributes as:

<div class=modal fade id=your-modal tabindex=-1 role=dialog aria-labelledby=myModalLabel>

    <div class=modal-dialog role=document>

        <div class=modal-content>

            <div class=modal-header>



            </div>

            <div class=modal-body>



            </div>

        </div>

    </div>

</div>