CODEWITHSUNDEEP
jqueryajaxformsdialog
Nick
Nick

Reputation: 3965

jQuery dialog - submit form via ajax?

I'm displaying a large form with lots of validation in a jQuery dialog box, but I'm now wondering if there's anyway of getting it so that once I submit the actual form, it will load via Ajax and stay in the modal window I have open? Not sure if there's anyway of doing this.

Thanks!

Upvotes: 1

Views: 6032

Answers (4)

Juzer Ali
Juzer Ali

Reputation: 4167

You MUST check out this wonderful jquery form plugin for ajaxifying your forms. The beauty of it is that if you have put validations inside pattern attribute of your inputs (which I prefer to do rather than writing javascript snippets for every input field) the form will get submitted only when each of the validations passes. In short the default behavior of your submit event will change and you will have an exact replica of your REQUEST, except that this time it is in ajax.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

Here's a failry simple method that will just replace the form element itself upon submit success. I am using on() method so the code can run on page load prior to form being loaded in ajax

$(document).on('submit', '#formID',function() {
    var $form = $(this);
    var dataToServer = $form.serialize();
    $.post(urlString, dataToServer, function(dataFromServer) {
        /* run ajax sucess code here */

        $form.replaceWith(dataFromServer);


    });
    return false; /* avoid browser submitting form*/

});

EDIT: how you integrate this will depend on your validation methods also

Upvotes: 1

Kristian
Kristian

Reputation: 21810

$('.mySubmitButton').bind('click', function(e) {
   //do something else
   return false; //stops form from submitting the normal way.
});

or

   $('form#IDofForm').submit(function() {
      //do something upon submit
   });

or a combo of both if you wish

Upvotes: 1

Har
Har

Reputation: 5004

Yes, you must hyjack the submit button to perform an ajax GET passing it all the form fields, then return false;

Upvotes: 3

Related Questions