Using jQuery and the form and validate plugins, it is simple to add unobtrusive ajax to your existing form page
1, Modify your existing form page
- Add
<input type="hidden" name="isAjax" id="isAjax" value="0" /> to your form. This field will tell the processing script, process_input.php in my example, if the values in the form were submitted using ajax or as an ordinary form submit, defaulting to isAjax = 0 (false).
- Add
class="required" to the fields that requires input
- Add the
<div id="result"></div> where you want the ajax output
[sourcecode language="html"]
<form id="form1" name="form1" method="post" action="process_input.php">
<input type="hidden" name="isAjax" id="isAjax" value="0" />
Name: <input type="text" name="name" class="required" id="name" value="" /> <br />
<input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="result"></div>
[/sourcecode]
Continue reading