===================
AJAX Form Submitter
===================

This can likely be found online....

The goal is to add AJAX form submission for simple updates to not
require a page refresh. The existing POST with page refresh will
remain as is. The goal is to simply graft the ajax functionality on
the existing form.

Generally the forms will have a very few data elements and very few
user inputs. There will often be many iterations of a similar form in
the page, so everything needs to uniquely identify the form.

Browser support: Safari, Firefox 1.0+, Internet Explorer 5.5+

Example existing HTML form:


<div id="project5">
<form name="update_project5" id="id_update_project5" class="ajax
anotherclass" method="POST" action="/handler/?param=xxx"
onsubmit="existing(); return true;">
<input type="hidden" name="return" value="/here/" />
<input type="hidden" name="id" value="5" />
<input type="submit" name="action" value="update" />
</form>
   <p id="project5_progress" style="display:none"><img
src="spinner.gif" > Processing...</p>
   <p id="project5_error" style="display:none">This will display if
the ajax post fails.</p>
   <p>This is some info about the project</p>
</div>
<div id="project5_success" style="display: none">Project 5 has been
updated</div>

<script>CreateAjaxForm( form_id='update_project5',
variable_name='return', variable_value='json',
processing_id='project5_progress', success_hide='project5',
success_show='project5_success', success_function=false,
failure_function=false )</script>

... repeat this pattern 20 times on page with different projectN ids



The existing form submits via POST, magic happens, redirects to the
same url for GET, the page reloads and usually the affected item is
not on the page.

The code should consist of a function that is called with specific
data to determine the action and cause the form to become "ajaxified"
meaning it will post and upon success, it will react as directed.

function CreateAjaxForm( form_id, variable_name, variable_value,
processing_id, success_hide, success_show, success_function,
failure_function )

All parameters except form_id, variable_name, variable_value are optional.

form_id = string id of the form to ajaxify; passed to getElementById()
to access and manipulate the form
input_name = string name of the input parameter to adjust; not
necessaryily unique to page, but unique to form
input_value = string contents to put in the value of the input
parameter so that the server knows this is an ajax POST
processing_id = string id of block element to display while the
request is running; hide when response is received
success_hide = (optional) if the POST is successful, HIDE the contents
of this block element (string id)
success_show = (optional) if the POST is successful, SHOW the contents
of this block element (string id)
success_function = (optional) if the POST is successful, call this
javascript function (js function object);
failure_function = (optional) if the POST fails, call this javascript
function (js function object)

success/failure functions take the following parameters: (form_id,
variable_name, variable_value, processing_id, success_hide,
success_show, ajax response reference) but instead of string ids, the
object reference is passed.

DO NOT USE a thick js library like prototype, dojo, etc

DO use a ajax wrapper function that handles difference between IE and
everything else. DO handle asynch request and response notify. This
code should simply distinguish success (200) or failure (!200) and be
able to pass the response to a supplied js function.

Visibility changing of processing_id, success_hide, and success_show
should always be performed if supplied even if success/failure
javascript handlers are provided.

To "ajaxify" a form, replace (or create) the onsubmit handler with a
function that is created by the CreateAjaxForm. The handler should:
   a. call any existing onsubmit handler; if it returns true,
proceed; otherwise, return fail (don't call ajax post)
   b. show processing_id block element
   c. build ajax request data from form
   d. alter input_name field to contain input_value
   e. attach asynch ajax response handler
   f. perform ajax post
   g. upon 200 response
       * display success_show element
       * hide success_hide element
       * call success_function
   h. upon failure
       * display failure_show element
       * call failure_function
   i. hide processing_id block element

The success/failure javascript handlers are intended to allow more
complicated UI interactions. For example the server could supply JSON
data to process and display, or it could provide HTML to insert into
the existing placeholder. These functions should be passed the
contents of the response (including status code) as well as the
references (not string ids) of the html block elements designated in
the CreateAjaxForm setup call.