Forms.js - Adds AJAX functionality to standard HTML forms

The Forms class attaches an onload event to the window that searches for all HTML forms that have a CSS class name of 'ajax' and automatically adds all the required javascript functionality to them. To use this class all you need to do is include the javascript source, create a div for your output that has a class name of 'output', and create a standard form with a class name of 'ajax', like so:

<script type='text/javascript' src='/scripts/forms.js'></script>
 
<div class='output'></div>
<form action='/example/test' class='ajax'>
   <input type='text' name='output' value='Hello World'>
   <input type='submit' value='Submit'>
</form>

When the form is submitted, an Ajax request will be sent to the 'action' url with the appropriate parameters, but the page will not be reloaded. Instead, a JSON response is expected from the server, which will be loaded into the 'output' div. You can have as many AJAX forms as you want per page, the class automatically takes care of pairing each form with its appropriate output div. Any server side script will work as long as it returns a JSON response, but here is what an example action might look like in PHP using the Zend Framework:

<?php
   public function testAction() {
      Zend_Loader::loadClass( 'Zend_Json' );
      $this->_helper->viewRenderer->setNoRender();
 
      $response = array( 'type' => '', 'message' => '' );
 
      if( $output = $this->_getParam( 'output' ) ) {
         $response['type'] = 'success';
         $response['message'] = $output;
      } else {
         $response['type'] = 'error';
         $response['message'] = 'No output specified';
      }
 
      print Zend_Json::encode( $response );
   }
?>

Once the response is received, the 'output' div will be given a class of response.type, and the contents will be set to response.message. This way you can customize what the output div will look like for different types of responses; for example, you could make it green on success or red when there is an error.