Page 1 of 1

How to Use Form Processor Snippet Rate Topic: -----

#1 P4L  Icon User is offline

  • Your worst nightmare
  • member icon

Reputation: 34
  • View blog
  • Posts: 2,788
  • Joined: 07-February 08

Posted 15 December 2008 - 11:08 AM

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

<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:
Posted Image
With Information Added:
Posted Image

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

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

<!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:
Posted Image

Is This A Good Question/Topic? 0
  • +

Page 1 of 1