So you’ve decided to be supercool and use jQuery. That was a wise decision you made, because jQuery totally rocks. Especially in Rails apps, jQuery makes life a LOT simpler. Yes, you have to learn some JavaScript and some quasi-new syntax, but it’s still seriously powerful and convenient.

There’s only one problem: if you’re like me (i.e. JavaScript-impaired), you just couldn’t get your forms to submit via an AJAX call.

You’ve probably heard of something called the jQuery Form Plugin. It’s a bit overwhelming looking at all the options and trying to extract just the functionality you need if you aren’t a JS Jedi, though. And so, without further ado, I present to you jQuery Form Submission for Dummies!

Okeydokey. The first step is to download the jQuery Form Plugin. Once you’ve downloaded it, you need to include it in your app template, like so:

<script src="/javascripts/jquery.form.js" type="text/javascript"></script>

Be sure to put the jQuery Form Plugin include after your jQuery include.

The next step is to actually have a form you want to submit via AJAX. In order to use the jQuery Form Plugin, there are a few key things to do:

1. Make sure your form works first via normal HTML POST or GET submission
2. Make sure your form has an id tag, like: <form id="myForm1" method="...">

Alrighty, you’re almost done. All that’s left is to include a few lines of JS to make it all work. Open whatever file you plopped all your other jQuery stuff into, and add this inside the $(document).ready(function() { ... }); part somewhere near the end:

// jQuery Form Plugin options
var myFormOptions = {
  target:        '#form_wrapper',
  beforeSubmit:  formBeforeSubmit,
  success:       formAfterSubmit
};

function formBeforeSubmit() {
  // PERFORM ACTIONS BEFORE FORM SUBMIT HERE
  return true;
}

function formAfterSubmit()  {
  // PERFORM ACTIONS AFTER FORM SUBMIT HERE
}

// Make form use jQuery Form Plugin
$('#myForm1').ajaxForm(myFormOptions);

Now, that all may look uber-complicated, but it’s really quite simple. The first chunk simply sets up the options for the jQuery Form Plugin. Specifically, it says:

• After the form is submitted, the target element to be updated with the results of the form posting action is #form_wrapper. Usually this will be a DIV with the id specified.
• Just before submitting the form, call the function formBeforeSubmit() and do whatever it says
• Just after submitting the form, call the function formAfterSubmit() and do whatever it says

The next two functions are the actual formBeforeSubmit() and formAfterSubmit() functions that are called at the appropriate time. formAfterSubmit() is basically the callback function like with any other jQuery function. If you don’t need one or both of these callbacks, simple remove the function itself as well as the corresponding line from myFormOptions.

Finally, the last little bit of jQuery says, “take the form with id=’myForm1‘ and make it AJAXified using the options defined in myFormOptions“.

That’s it.

When you submit the form from here on out, one of two things will happen:

• If the user has JavaScript enabled, the form will be AJAXified
• If the user does NOT have JavaScript enabled, the form will be submitted via a normal POST/GET request

Wasn’t that easy? You barely even have to touch your form, and commenting out one line of JavaScript will disable the AJAXification. It’s simply glorious in its unobtrusiveness. And, it works right out of the box without any headaches.

Of course, there are a lot more options in the jQuery Form Plugin if you want to go totally crazy. You can even use it for AJAX file uploads.

Have fun!