<!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>