Skip to content

Instantly share code, notes, and snippets.

@havvg
Created August 1, 2012 13:20
Show Gist options
  • Save havvg/3226804 to your computer and use it in GitHub Desktop.
Save havvg/3226804 to your computer and use it in GitHub Desktop.
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>
@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

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

<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

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!

@drunkSh
Copy link

drunkSh 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

Hi, how to add loading indicator while saving?

@iammichaelgarcia
Copy link

@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