<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Example 14-7. Code for submitting a form using Ajax</title>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<script type="text/javascript" src="../js/prototype.js"> </script>
<script type="text/javascript">
//<![CDATA[
/**
* This function, get_params, takes the id of a form in a page and
* parses out all form elements, creating a parameter string to be
* used in an Ajax call.
*
* @param {String} p_formId The id of the form to parse elements from.
* @return Returns the parameter string containing all of the form
* elements and their values.
* @type String
*/
function get_params(p_formId) {
var params = '';
var selects = $(p_formId).getElementsByTagName('select');
/*
* Loop through any <select> elements in the form and get their
* values
*/
for (var i = 0, il = selects.length; i < il; i++)
params += ((params.length > 0) ? '&' : '') + selects[i].id + '=' + selects[i].value;
var inputs = $(p_formId).getElementsByTagName('input');
/*
* Loop through any <input> elements in the form and get their
* values
*/
for (var i = 0, il = inputs.length; i < il; i++) {
var type = inputs[i].getAttribute('type');
/*
* Is this <input> element of type text, password, hidden,
* or checkbox?
*/
if (type == 'text' || type == 'password' || type == 'hidden' || (type == 'checkbox' && inputs[i].checked))
params += ((params.length > 0) ? '&' : '') + inputs[i].id + '=' + inputs[i].value;
/* Is this <input> element of type radio? */
if ((type == 'radio' && inputs[i].checked))
params += ((params.length > 0) ? '&' : '') + inputs[i].name + '=' + inputs[i].value;
}
var textareas = $(p_formId).getElementsByTagName('textarea');
/*
* Loop through any <textarea> elements in the form and get their
* values
*/
for (var i = 0, il = textareas.length; i < il; i++)
params += ((params.length > 0) ? '&' : '') + textareas[i].id + '=' + textareas[i].innerHTML;
return (params);
}
/**
* This function, myForm_onclick, makes an Ajax request to the server
* and changes the /pageContentContainer/ <div> element to the
* /responseText/ sent by the server.
*
* @return Returns false so that the form will not submit in the
* normal XHTML fashion.
* @type Boolean
* @see Ajax#Request
*/
function myForm_onclick() {
new Ajax.Request('example_14-7.php', {
method: 'post',
parameters: 'xhr=1&' + get_params('myForm'),
onSuccess: function(xhrResponse) {
$('pageContentContainer').innerHTML = xhrResponse.responseText;
},
onFailure: function(xhrResponse) {
$('pageContentContainer').innerHTML = xhrResponse.responseText;
}
});
return (false);
}
//]]>
</script>
</head>
<body>
<div id="pageContentContainer">
<form id="myForm" name="myForm" action="example_14-7.php">
<div>
<label for="myText">Text: </label><input type="text" id="myText" value="" /><br />
<input type="hidden" id="myHidden" value="" />
<label for="myPassword">Password: </label><input type="password" id="myPassword" value="" /><br />
<input type="checkbox" id="myCheck1" value="chk1" /> <label for="myCheck1">Check 1</label><br />
<input type="checkbox" id="myCheck2" value="chk2" /> <label for="myCheck2">Check 2</label><br />
<input type="checkbox" id="myCheck3" value="chk3" /> <label for="myCheck3">Check 3</label><br />
<input type="radio" id="myRadio1" name="myRadio" value="rdo1" checked="checked" /> <label for="myRadio1">Radio 1</label><br />
<input type="radio" id="myRadio2" name="myRadio" value="rdo2" /> <label for="myRadio2">Radio 2</label><br />
<input type="radio" id="myRadio3" name="myRadio" value="rdo3" /> <label for="myRadio3">Radio 3</label><br />
<label for="mySelect">Select options: </label>
<select id="mySelect">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
<option value="opt3">Opt3</option>
</select><br />
<label for="myTextarea">Textarea: </label>
<textarea id="myTextarea" cols="50" rows="10"></textarea>
</div>
<div>
<input type="reset" value="Reset" /> <input type="submit" value="Submit" onclick="return myForm_onclick( );" />
</div>
</form>
</div>
</body>
</html>