### 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'});"