jQuery AJAX form submit with Twitter Bootstrap modal

ajax-form.js

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();
    });
});

form.html

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

Just change .live to .on because it's removed in jquery 1.9.
Anyway, awesome code, thanks :)

@ vuk-nikolic Agree completely in the docs it says that you should use .on instead of .live for various performance reasons.

I tried your code and i have alittle issues what is the problem why i cant get into post

php code: echo $_POST['fullname'];

html inside the form:

it wont echoed out. why?

Amazing. I've been looking for something just like this. It works great. Thank you very much for this code :D

I tried your code, it's seems to be easy but the validation page opens in a new page, not into the modal like the form, have you a demo please ??

awesome code for me, thanks mate

You safe my days @havvg. thanks a lot!

thanks, this helped a lot -- I added my submit button in the "modal-footer" like this.

<form id="ratting-form"

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button form="ratting-form" class="btn btn-primary" type="submit">Save changes</button>
</div>

Hey this looks pretty nice. I may replace my go-to code for this type of thing with this gist.

Very good! However I have one problem.
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? Maybe I need somehow to reload the DOM after the form is successfully submitted?

Heyyyyyyyyyyyyyyy don't work =D
=.='

not working

nice and clean :)

this works great with Bootstrap 2 but is broken for me with Bootstrap 3 -- anyone have tips for making it Bootstrap 3 compatible?

Really helpful :) Thanks a ton

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();
    });
});

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?

Good!

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

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!

<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();
    });

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");
    });

Thank you so much!

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.

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

simply awesome man!!!

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

Hi, how to add loading indicator while saving?

@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>");