Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery AJAX form submit with Twitter Bootstrap modal
jQuery(function($) {
$('form[data-async]').live('submit', function(event) {
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(data, status) {
$target.html(data);
}
});
event.preventDefault();
});
});
<!-- Bootstrap trigger to open modal -->
<a data-toggle="modal" href="#rating-modal">Write a Review</a>
<div class="hide fade modal" id="rating-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2>Your Review</h2>
</div>
<div class="modal-body">
<!-- The async form to send and replace the modals content with its response -->
<form class="form-horizontal well" data-async data-target="#rating-modal" action="/some-endpoint" method="POST">
<fieldset>
<!-- form content -->
</fieldset>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
</div>
</div>
@Batistleman
Copy link

Batistleman commented Dec 4, 2013

Nice Gist, to get this to work with boostrap 3 and latest jquery try:

jQuery(function($) {
    $('form[data-async]').on('submit', function(event) {
        var $form = $(this);
        var $target = $($form.attr('data-target'));

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {
                $target.modal('hide');
            }
        });

        event.preventDefault();
    });
});

@touch2hussain
Copy link

touch2hussain commented Dec 20, 2013

even i face this problem... plz help...When I open form and then submit it and echo some "success message", and then open it again from the link, I get the "success message". How to avoid this?

@vongosling
Copy link

vongosling commented Jan 13, 2014

Good!

@xomero
Copy link

xomero commented Jan 30, 2014

Hi, I'm trying to load a custom form in the modal, like send some params via Ajax, load the form in the modal, and then do the submit (ajax submit like yout code)

Any Idea?

Thank you

@BurnedToast
Copy link

BurnedToast commented Feb 11, 2014

There are 2 problems with this code

  1. it wont submit the submit-button value
  2. if you replace live with on, the JS wont trigger if the modal is a remote-Modal

I fixed this issues with the following code:

jQuery(function($) {
    $(document).on('submit', 'form[data-async]', function(event) {
        var $form = $(this);
        var $target = $($form.attr('data-target'));
        var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form);

        var formData = $form.serializeArray();
        if (submitButton.size() === 1) {
            formData.push({ name: $(submitButton[0]).attr("name"), value: "1" });
        }
        else if(submitButton.size() !== 0) {
            console.log("Multiple submit-buttons pressed. This should not happen!");
        }

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: formData,

            success: function(data, status) {
                $target.html(data);
            }
        });

        event.preventDefault();
    });

    $(document).on("click", 'input[type="submit"], button[type="submit"]', function() {
        $('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

Please let me know if someone knows a better way to determinate the pressed submit button!

@riterrani
Copy link

riterrani commented Mar 4, 2014

<form data-async data-target="event|close|#alert-settings" action="/alerts/settings/save" method="POST">
$('.modal').on('submit','form[data-async]', function(event) {
        var $form = $(this);
        var target = $form.attr('data-target');

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {
                $.each(target.split("|"),function(i,val){
                    if(val == "close"){
                        $form.closest(".modal").modal("hide");
                    }else if(val == "event"){
                        $form.trigger("ajax-submit");
                    }else{
                        $(val).html(data);
                    }
                });
            }
        });

        event.preventDefault();
    });

@webIMT
Copy link

webIMT commented Mar 5, 2014

Hi,

the code from @BurnedToast is OK but only at the first click on submit button cause, at the second click, two posts are sent, at the third, three, etc...

Is there any solution ?

My code :

   $('.modal').on('submit', 'form[data-async]', function(e) {
        var $form = $(this);
        var enctype = $form.attr('id')

        if(enctype == 'multipart') {
            var formData = new FormData(this);

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,

                success: function(data, status) {
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }
        else {
            var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form);
            var formData = $form.serializeArray();

            if(submitButton.size() === 1) {
                formData.push({ name: $(submitButton[0]).attr("name"), value: "1" });
            }
            else if(submitButton.size() !== 0) {
                console.log("Weird, multiple submit-buttons pressed!");
            }

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                cache: false,

                success: function(data, status) {
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }

        e.preventDefault();
    });

    $('.modal').on("click", 'input[type="submit"], button[type="submit"]', function() {
        $('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });

@brojask
Copy link

brojask commented Mar 21, 2014

Thank you so much!

@ProNotion
Copy link

ProNotion commented Jul 2, 2014

I am trying to get this working with Bootstrap 3 and a form which is using jQuery Unobtrusive validation (in case that makes a difference). For some reason the form is performing a full page submit. I've added alerts to the script in multiple places but none are ever triggered.

Here is my code if anyone can see anything wrong?

jQuery(function ($) {
    $('form[data-async]').on('submit', function (event) {

        alert("async form");

        var $form = $(this);
        var $target = $($form.attr('data-target'));

        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            success: function (data, status) {
                alert(status);
                $target.modal('hide');
            },
            error: function (result) {
                alert(result);
            }
        });
        event.preventDefault();
    });
});

I am using jquery-1.9.0.js. I notice just before the page submits that an error gets generated in the console as follows:

"Unexpected token u" and seems to break on the following line in the jQuery source:

return window.JSON.parse( data );

The value of data at this point is true but not sure where the value has come from.

@nobutsta
Copy link

nobutsta commented Feb 2, 2016

@BurnedToast is working but @riterrani can close the modal after a submit is clicked!

@1MaCh33
Copy link

1MaCh33 commented Jul 25, 2016

simply awesome man!!!

@huabin
Copy link

huabin commented Jul 30, 2016

@BurnedToast I try your code, but there is an issue here

$(document).on('submit', 'form[data-async]', function(event) {

if I change it to

$(document).on('submit', function(event) {

Works!

@frozenade
Copy link

frozenade commented Sep 24, 2016

Hi, how to add loading indicator while saving?

@iammichaelgarcia
Copy link

iammichaelgarcia commented Jan 13, 2018

@frozenade Put a div with id name of your choice and first line of the function add. In my example below I named the div id="processing"

$('#processing').html("<b>Saving...</b>");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment