JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 306,975 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,862 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

How to Use Form Processor Snippet

How to Use Form Processor Snippet

Options

P4L

15 Dec, 2008 - 10:08 AM

Post #1

How to Use Form Processor

This tutorial is how to use the Form Processor Snippet that was submitted on November 25th.

In HTML, there are times when the coder needs to see if the form is working properly. To do this, there is an HTML page that can be created that will return the values that are entered into the form.

To start, create an HTML form page. Of course start off the HTML page like one would normally do.

html


<html>
<head>
	<title></title>
	<style type="text/css">
	
	h1 {text-decoration: underline;color: #00AAFF}
	
	</style>
</head>

This code creates the header of the page, as well as defines the characteristics for the first heading.

Next, create the body of the form with all the required information.

html


<body>
<h1>This is a form</h1>
	<form action="FormProcessor.html" method="get" >
		Street:<input type="test" name="street"><br>
		City:<input type="text" name="city" size="25"><br>
		State:<select name="state" size="2">
			<option>AZ</option>
			<option>CA</option>
		</select><br>
		Zip Code:<input type="text" name="zip" size="5" maxlength="5"><br>
		Bubba:<input type="password" name="herbert" size="5"><br>
		Comments:<textarea name="comments" cols="15" rows="5"></textarea><br>
		
		Pick One:<br><input type="radio" name="pick value="item_one">One<br>
		<input type="radio" name="pick value="item_two">Two<br>
		<input type="radio" name="pick value="item_three">Three<br>
		<input type="radio" name="pick value="item_four">Four<br>
		
		
		<input type="submit" name="submit_form"><br>
		<input type="reset" name="reset"><br>
	</form>
</body>
</html>

Once this page, or whatever the user needs, has been created, it should look something like this:
Without Information Added:
IPB Image

With Information Added:
IPB Image

In the snippet above, pay close attention to this line of code.

html


<form action="FormProcessor.html" method="get" >

This is the code that will retrieve the form processor, and submit the information back to the user. It is an action calling the form processor html page. As with all html pages that have added items to them, the form processor page needs to be saved in the same folder as the form. Now, for the code for the form processor.

html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Processor</title>
</head>
<body>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
	formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	document.writeln(formArray[i] + "<br />");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</body>
</html>

What this will do is look at the html page that it is linked to, find the required fields, and look for any values entered into them. Once the submit button has been pressed, the user is redirected to a new page that looks like this:
IPB Image