JavaScript Document Object with Forms

« Previous Tutorial Next Tutorial »

The document object provides the forms[] property to select the references of all the form objects of an HTML document. Just by using the index number of forms or by using their names, you are able to access individual forms.

JavaScript Document Object with Forms Example

Here is an example demonstrates document object with forms in JavaScript:

<!DOCTYPE HTML>
<html>
<head>
	<title>JavaScript Document Object with Forms</title>
	<script type="text/javascript">
		function order()
		{
			var order = "Dear "
			order = order + document.forms[0].Name.value
			order = order + ", You have ordered a laptop with size "
			if(document.forms[0].size.options[0].selected)
			{
				order = order + "small"
			}
			if(document.forms[0].size.options[1].selected)
			{
				order = order + "medium"
			}
			if(document.forms[0].size.options[2].selected)
			{
				order = order + "large"
			}
			order = order + ". The order will be delivered in a "
			if(document.forms[0].packaging[0].checked)
			{
				order = order + "cardboard box"
			}
			if(document.forms[0].packaging[1].checked)
			{
				order = order + "styrofoam-insulated container"
			}
			order = order + " to the address: "
			order = order + document.forms[0].address.value
			alert(order)
		}
	</script>
</head>
<body>

<h3>JavaScript Document Object with Forms Example</h3>
<form action="mailto:shop@codescracker.com" method="post" onSubmit="order()" enctype="text/plain">
	Name: <input name="Name" size="20"><br/>
	Address: <input name="address" size="20"><br/><br/>
	Laptop Size: <select name="size">
		<option>small</option>
		<option selected>medium</option>
		<option>large</option>
	</select><br/>
	Packaging: <input type="radio" name="packaging">Cardboard Box
	<input type="radio" name="packaging">Styrofoam-insulated container<br/><br/>
	<input type="submit" value="Place Order Now">
</form>

</body>
</html>

Here is the sample output produced by the above JavaScript document object with forms example. This is the initial output:

Now, to place your order, just fill all the field as shown in the following figure:

After filling all the field, just click on Place Order Now button, you will get the following output:

After clicking on the Ok button, a new mail message window appears containing the order details.

JavaScript Online Test

« Previous Tutorial Next Tutorial »