With the advent of DOMAssistant 2.6, a new world with plugins opened up. Time to release the first one: AJAXForms.

The idea with the AJAXForms plugin is to be able to post a form through AJAX, without having to post the entire web page. It also supports setting a validation function before the submission, and an optional function handling the response once the post has been completed.

How to use it

It is very simple to enable the AJAXForms plugin functionality. Simply add the class “ajax-form” to any form you would like to be submitted via AJAX. For example:

<form action="some-url.php" class="ajax-form">

Setting validation function

There are three ways you can specify what validation function to be called before the form gets posted:

Alternative 1

// Applies to the form with an id of "form-id" in the web page
$("#form-id").setBeforeSubmissionHandler(functionToCall);

Alternative 2

// Applies to all AJAXForms in the web page
DOMAssistant.AJAXForms.setBeforeSubmissionHandler(functionToCall);

Alternative 3

<!--
	Using an extra class value on the form itself.
	Replace functionToCall with desired function name.
-->
<form action="some-url.php" class="ajax-form before-handler-functionToCall">

Setting function to handle the response

Just as with validation, there are three options to set what function to call once the posting has been completed:

Alternative 1

// Applies to the form with an id of "form-id" in the web page
$("#form-id").setResponseHandler(functionToCall);

Alternative 2

// Applies to all AJAXForms in the web page
DOMAssistant.AJAXForms.setResponseHandler(functionToCall);

Alternative 3

<!--
	Using an extra class value on the form itself.
	Replace functionToCall with desired function name.
-->
<form action="some-url.php" class="ajax-form response-handler-functionToCall">

Downloading the AJAXForms plugin

You can downlod the AJAXForms plugin for DOMAssistant from the AJAXForms plugin project site.