DOMAssistantAJAXForms

AJAXForms is a plugin to DOMAssistant, and offers the possibility to submit forms dynamically through AJAX without posting the entire page.

Usage:

Use DOMAssistant in your web page. Then include the DOMAssistantAJAXForms plugin. There are two ways of adding AJAX form functionality to a form:

Approach 1:

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">.

Approach 2:

Use a JavaScript call to apply the functionality to the form, and optionally, setting beforeSubmissionHandler, responseHandler and request headers. For example:

$("#form-id").setAJAXForm(function () {
	// Function to run before submission
}, function (response) {
	// Function to run to handle the response
}, {
	// Setting headers, as an object
	"X-Requested-With" : "XMLHttpRequest"
});

When the posting is complete:

You can, in three different ways, specify what function should be called once the posting is complete.

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

The called function:

Using any of these approaches, in functionToCall, the first parameter will be the response from the request. The context will the form that it was called on, i.e. "this" in that function will be the form element which was posted.

Before the posting:

If you want, for instance, to validate the form before it's sent, you can specify a function to run, and then continue posting if that function returns true, or stop the posting if it returns false.

You can, in three different ways, specify what function should be called before the posting occurs.

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

The called function

Using any of these approaches, the context will the form that it was called on, i.e. "this" in that function will be the form element which was posted.