javascript - Pop up Bootstrap modal on success AJAX call

Question

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

Answer 1

<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>