Home & blog  /  Scripts  /  view post  /

Ajaxify - re-route your forms via AJAX

Overview

This script takes existing forms, identified by a certain class, and re-routes them via AJAX. The data is gathered and sent to the handler set in action via the method set in method. A response is received from the handler and optionally passed to a callback function.

Usage

The plugin acts on any form that has a class starting with the string 'ajaxify' and followed optionally by the name of a callback function, prefixed with a hyphen, to which the AJAX response (i.e. the output of the form handler script) will be passed. For example, the class for the form in the below example is:

class="ajaxify-name_of_callback_func"

Important: For your callback function to receive the AJAX response, it needs to be set up to expect it. That is, ensure your callback function expects one argument - the response. For example, the callback function for the above example is, simply:

1function mycallback(ajax_response) {

2     alert(ajax_response);

3}

If you don't need your callback function to have access to the AJAX response, you don't need it to expect any arguments.

Example

Here's a simple form, pointing to a simple form handler which receives the submitted data and returns a message. The plugin reroutes it to call its handler via AJAX rather than page transition.

Here's the form tag for the above form:

'../inc/script_demos/ajaxify/sample_handler.php' method='post' class='ajaxify-mycallback'>

mycallback() is the function, specified in this page (and shown in the usage section above) that is called and passed the AJAX response from the handler.

Notes

File uploads

Since uploading files via AJAX is still a bit of a pipe dream due to complications with the headers that need to be sent in multipart data forms, this script ignores any s of type file. I will, however, be modifying it to handle file uploads using the usual fudge, which is to route them as a separate request via a hidden