Submit forms with XHR

Submit forms without page refresh

This page demonstrates how to use Spry to submit a form without refreshing the current page.

It requires ColdFusion scripting enabled on the server.

These are a few samples on how to change a default submit (that uses a page rountrip to server) to an ajax-enabled submit that doesn't refresh the page.

Here's a form with all types of fields:

TextField:
Password:
Hidden:
Textarea:	Textarea content goes here One more line And more..
Simple select:
Multiple select:
Checkboxes:	1 2 3 4 5
Radio Buttons:	1 2 3 4 5
Button:

Here's the response from the server:

Notes:

Change the default browser submit to an Ajax-enabled submit by setting onSubmit handler to Spry.Utils.submitForm(form, callback):

 <form name="form1" method="post" action="SubmitChecker.cfm" 
 		onsubmit="return Spry.Utils.submitForm(this, updateResponseDiv);">
 ...
// where the success callback:
function updateResponseDiv(req) 
{
	// do something with the response from the server
}

The form can be submitted using either GET or POST, but the default method and url are taken from the form attributes: "method" / "action". Both method and submit url can be overwritten by passing the optional arguments:
```
onsubmit="return Spry.Utils.submitForm('form1', updateResponseDiv, {method:'get', url:'AjaxSubmitChecker.cfm'});"
```
Forms that have enctype="multipart/form-data" are submitted using the default browser behavior (no ajax submit!).
By default all the fields in the form are submitted, except for file fields, buttons and reset buttons.
If only a custom list of fields is required to be submitted to the server, pass the 'elements' list as an optional argument to the Spry.Utils.submitForm function:
```
onsubmit="return Spry.Utils.submitForm('form1', updateResponseDiv, {elements: ['textfield', 'simpleselect']});"
```

Additional data can be send to the server by passing an 'additionalData' string that contains 'key=value' encoded parameters:

onsubmit="return Spry.Utils.submitForm('form1', updateResponseDiv, 
	{url:'AjaxSubmitChecker.php', additionalData:'ajaxSubmit=true&from=samples'});"