JavaScript Form

Entering and Getting Form Data Into a Thank You Letter

Page 1 of 1

2 Replies - 1804 Views - Last Post: 29 October 2006 - 09:32 PM

#1 kevinm1019  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 09-April 06

JavaScript Form

Posted 28 October 2006 - 12:10 AM

I need to create a form, pull the data from the form, and generate a 'Thank You' letter which incorporates various form elements. I have the three page form create but I can't get the 'Next' or 'Submit Registration' buttons to work on the second page or get the form elements to display in the 'Thank You' letter. I am really frustrated and could use some help. Here is my code:

Page 1 of 2
<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function confirmReset() {
		var resetForm = confirm("This will clear the form information. Are you sure?");
		if (resetForm == true)
				return true;
		return false;
}
function nextForm() {
		document.cookie = encodeURI("lastname=" +  document.forms[0].lastname.value);
		document.cookie = encodeURI("&firstname=" +	 document.forms[0].firstname.value);
		document.cookie = encodeURI("&ssn=" +  document.forms[0].ssn.value);
		document.cookie = encodeURI("&birthdate=" +	 document.forms[0].birthdate.value);
		document.cookie = encodeURI("&address=" +  document.forms[0].address.value);
		document.cookie = encodeURI("&city=" +  document.forms[0].city.value);
		document.cookie = encodeURI("&state=" +	 document.forms[0].state.value);
		document.cookie = encodeURI("&zip=" +  document.forms[0].zip.value);

		document.cookie = encodeURI("&pgname1=" +  document.forms[0].pgname1.value);
		document.cookie = encodeURI("&pgname2=" +  document.forms[0].pgname2.value);

		document.cookie = encodeURI("&econtact=" +  document.forms[0].econtact.value);
		document.cookie = encodeURI("&ephone=" +  document.forms[0].ephone.value);
		document.cookie = encodeURI("&erelation=" +  document.forms[0].erelation.value);

		for (var t=0; t<document.forms[0].transportation.length; ++t) {
					if (document.forms[0].transportation[t].checked == true)
						document.cookie = encodeURI("&transportation="
					+ document.forms[0].transportation[t].value);
		}

		document.cookie = encodeURI("&comments=" + document.forms[0].comments.value);
		location.href="StudentReg.html";
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body bgcolor="#cccccc">
<h2><img src="contract.png"> UOP High School - Student Registration Form</h2>
<form action=""method="get" enctype="application/x-www-form-urlencoded" onreset="return confirmReset();">

<hr><b>Student Information:</b><hr>

<p>
Last Name &nbsp;&nbsp;			<input type="text" name="lastname" />&nbsp;&nbsp;
First Name &nbsp;&nbsp;			<input type="text" name="firstname" />&nbsp;&nbsp;
Social Security No.&nbsp;&nbsp;	<input type="password" name="ssn" maxlength="9" />&nbsp;&nbsp;
Birth Date&nbsp;&nbsp;			<input type="text" name="birthdate" value="mm/dd/yyyy" />
</p>

<p>
Street Address&nbsp;&nbsp;		<input type="text" name="address" size="35" />&nbsp;&nbsp;
City&nbsp;&nbsp;				<input type="text" name="city" />&nbsp;&nbsp;
State&nbsp;&nbsp;				<input type="text"name="state" size="2" maxlength="2" />&nbsp;&nbsp;
Zip Code&nbsp;&nbsp;			<input type="text" name="zip" size="5" maxlength="5" />
</p>

<hr><b>Family Information:</b><hr>

<p>
Parent/Guardian Name &nbsp;&nbsp;<input type="text" name="pgname1" size="25" />&nbsp;&nbsp;
Parent/Guardian Name &nbsp;&nbsp;<input type="text" name="pgname2" size="25" />
</p>

<hr><b>Emergency Contact</b> (If the parent(s) cannot be contacted):<hr>

<p>
Name&nbsp;&nbsp;					<input type="text" name="econtact" size="25">&nbsp;&nbsp;
Phone Number&nbsp;&nbsp;			<input type="text" name="ephone" size="13" value="(xxx)xxx-xxxx">&nbsp;&nbsp;Relationship&nbsp;&nbsp;			<input type="text" name="erelation" size="15">&nbsp;&nbsp;

Transportation?&nbsp;&nbsp;			<input type="radio" name="transportation" value="yes">Yes&nbsp;&nbsp;
   									<input type="radio" name="transportation" value="no">No
</p>

<hr><b>Additional Information:</b><hr>

<p>
<textarea name="comments" cols="50" rows="5">
Enter any additional information
</textarea>
</p>



<p>
<input type="reset" /> <input type="button" name="next" value=
" Next" onclick="nextForm()" />
</p>

</form>
</body>
</html>


Page 2 of 2

<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function confirmReset() {
		var resetForm = confirm("This will clear the form information. Are you sure?");
		if (resetForm == true)
				return true;
		return false;
}
function submitForm() {
	var savedData = "?" + decodeURI(document.cookie);
	savedData += "&insprov=" + document.forms[0].insprov.value;
	savedData += "&polnum=" + document.forms[0].polnum.value;
	savedData += "&insphone=" + document.forms[0].insphone.value;

function nextForm() {

	for (var s=0; s<document.forms[0].subject.length; ++s) {
				if (document.forms[0].subject[s].checked == true)
					document.cookie = encodeURI("&subject="
						+ document.forms[0].subject[s].value);

	if (document.forms[0].fb.checked == true)
			document.cookie = encodeURI("&fb=true");
	if (document.forms[0].bk.checked == true)
			document.cookie = encodeURI("&bk=true");
	if (document.forms[0].bb.checked == true)
			document.cookie = encodeURI("&bb=true");
	if (document.forms[0].sb.checked == true)
			document.cookie = encodeURI("&sb=true");
	if (document.forms[0].tr.checked == true)
			document.cookie = encodeURI("&tr=true");
	if (document.forms[0].fh.checked == true)
			document.cookie = encodeURI("&fh=true");
	if (document.forms[0].tn.checked == true)
			document.cookie = encodeURI("&tn=true");
	if (document.forms[0].cc.checked == true)
			document.cookie = encodeURI("&cc=true");
	if (document.forms[0].sw.checked == true)
			document.cookie = encodeURI("&sw=true");

	for (var g=0; s<document.forms[0].psat.length; ++g) {
					if (document.forms[0].psat[g].checked == true)
						document.cookie = encodeURI("&psat="
						+ document.forms[0].psat[g].value);
	}

	document.cookie = encodeURI("&graduation=" + document.forms[0].graduation.value);
	document.cookie = encodeURI("&comments=" + document.forms[0].comments.value);

	top.location.href="StudentThank.html" + savedData;

}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body bgcolor="#cccccc">
<h2><img src="contract.png"> UOP High School - Student Registration Form</h2>
<form action=""method="get" enctype="application/x-www-form-urlencoded" onreset="return confirmReset();">

<hr><b>Medical Information:</b><hr>

<p>
Insurance Provider		  <input type="text" name="insprov" />  
Policy No.				  <input type="text" name="polnum" />  
Phone Number			  <input type="text" name="insphone" size="13" maxlength="13" value="(xxx)xxx-xxxx">
</p>

<hr><b>Student Interests:</b><hr>

<p>
What is your child's favorite subject?<br />
<input type="radio" name="subject" value="Math" />Math
<input type="radio" name="subject" value="Science" />Science
<input type="radio" name="subject" value="History" />History
<input type="radio" name="subject" value="Foreign Language" />Foreign Language
<input type="radio" name="subject" value="Vocational" />Vocational
<input type="radio" name="subject" value="Computers" />Computers
</p>

<p>
What sports does your child participate in? (check all that apply)<br />
<input type="checkbox" name="fb" value="fb" /> Football   
<input type="checkbox" name="bk" value="bk" /> Basketball   
<input type="checkbox" name="bb" value="bb" /> Baseball   
<input type="checkbox" name="sb" value="sb" /> Softball   
<input type="checkbox" name="tr" value="tr" /> Track   
<input type="checkbox" name="fh" value="fh" /> Field Hockey   
<input type="checkbox" name="tn" value="tn" /> Tennis   
<input type="checkbox" name="cc" value="cc" /> Cross Country   
<input type="checkbox" name="sw" value="sw" /> Swimming   
</p>

<hr><b>Future Interests:</b><hr>

<p>
What does your child plan to do after graduation?
<select name="graduation">
<option value="work">Work</option>
<option value="college">College</option>
<option value="military">Military</option>
</select>
</p>

<p>
If you chose <b>college</b>, do you plan on having your child take the PSAT?  <input type="radio" name="psat" value="yes">Yes  <input type="radio" name="psat" value="no">No
</p>

<p>Additional information or comments<br />
<textarea name="comments" cols="50" rows="5">
Enter any additional information or comments here
</textarea>
</p>

<p><input type="reset" /> <input type="button" name="next" value=
" Next" onclick="nextForm()" /></p>
</form>
</body>
</html>


Whenever I press the button on the second page, I get two javascript errors. See attached.

This post has been edited by kevinm1019: 28 October 2006 - 12:13 AM


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Form

#2 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 64
  • View blog
  • Posts: 3,505
  • Joined: 31-March 03

Re: JavaScript Form

Posted 29 October 2006 - 12:19 PM

What are the errors?
Was This Post Helpful? 0
  • +
  • -

#3 kevinm1019  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 09-April 06

Re: JavaScript Form

Posted 29 October 2006 - 09:32 PM

View Posthotsnoj, on 29 Oct, 2006 - 01:19 PM, said:

What are the errors?


Ok... I was able to figure this part out. The challenge I'm having now is pulling the data into a "Thank You" letter. What I would like it to say is Thank you for registering (student's name) with our school. We are very interested in meeting you and discussing (student's name)'s interest in (favorite subject)... Here is the updated code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Registration</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function confirmReset() {
		var resetForm = confirm("This will clear all the information. Are you sure?");
		if (resetForm == true)
				return true;
		return false;
}
function nextForm() {

		document.cookie = encodeURI("&lastname=" +
			 document.forms[0].lastname.value);
		document.cookie = encodeURI("&firstname=" +
			 document.forms[0].firstname.value);
		document.cookie = encodeURI("&ssn=" +
			 document.forms[0].ssn.value);
		document.cookie = encodeURI("&birthdate=" +
			 document.forms[0].birthdate.value);
		document.cookie = encodeURI("&address=" +
			 document.forms[0].address.value);
		document.cookie = encodeURI("&apartment=" +
			 document.forms[0].apartment.value);
		document.cookie = encodeURI("&city=" +
			 document.forms[0].city.value);
		document.cookie = encodeURI("&state=" +
			 document.forms[0].state.value);
		document.cookie = encodeURI("&zip=" +
			 document.forms[0].zip.value);

		document.cookie = encodeURI("&parguard1=" +
			 document.forms[0].parguard1.value);
		document.cookie = encodeURI("&homephone=" +
			 document.forms[0].homephone.value);
		document.cookie = encodeURI("&busphone=" +
			 document.forms[0].busphone.value);


		document.cookie = encodeURI("&parguard2=" +
			 document.forms[0].parguard2.value);
		document.cookie = encodeURI("&homephone2=" +
			 document.forms[0].homephone2.value);
		document.cookie = encodeURI("&busphone2=" +
			 document.forms[0].busphone2.value);

		document.cookie = encodeURI("&emername=" +
			 document.forms[0].emername.value);
		document.cookie = encodeURI("&emerphone=" +
			 document.forms[0].emerphone.value);
		document.cookie = encodeURI("&relationship=" +
			 document.forms[0].relationship.value);


		document.cookie = encodeURI("&insurance=" +
			 document.forms[0].insurance.value);
		document.cookie = encodeURI("&insphnum=" +
			 document.forms[0].insphnum.value);
		document.cookie = encodeURI("&polnum=" +
			 document.forms[0].polnum.value);
		document.cookie = encodeURI("&med=" + document.forms[0].med.value);
		document.cookie = encodeURI("&medatt=" + document.forms[0].medatt.value);

		location.href="StudentReg.html";


}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body bgcolor="#cccccc">
<h2><img src="contract.png"> UOP High School - Student Registration Form</h2>
<form action=""method="get" enctype="application/x-www-form-urlencoded" onreset="return confirmReset();">

<hr><h3>Student Information:</h3>
<p>
Last Name <input type="text" name="lastname" />
First Name <input type="text" name="firstname" />
Social Security Number <input type="password" name="ssn" maxlength="9" />
Birth Date <input type="text" name="birthdate" value="mm/dd/yyyy"/>
</p>

<p>
Address <input type="text" name="address" size="25" />
Apt. No. <input type="text" name="apartment" />
City <input type="text" name="city" />
State <input type="text" name="state" size="3" maxlength="2" />
Zip Code <input type="text" name="zip" size="6" maxlength="5" />
</p>

<hr><h3>Family Information:</h3>
<p>
Parent/Guardian Name  <input type="text" name="parguard1" />
Home Phone Number  <input type="text" name="homephone" size="13" maxlenth="12" value="xxx-xxx-xxxx" />
Business Phone Number  <input type="text" name="busphone" size="13" maxlenth="12" value="xxx-xxx-xxxx" />
</p>

<p>
Parent/Guardian Name  <input type="text" name="parguard2" />
Home Phone Number  <input type="text" name="homephone2" size="13" maxlenth="12" value="xxx-xxx-xxxx" />
Business Phone Number  <input type="text" name="busphone2" size="13" maxlenth="12" value="xxx-xxx-xxxx" />
</p>

<hr><h3>Emergency Contact Information (If the parents are not available):</h3>
<p>
Name  <input type="text" name="emername" size="30" />
Phone Number  <input type="text" name="emerphone" size="10" maxlenth="10"/>
Relationship to Student  <input type="text" name="relationship" size="20" />
</p>

<hr><h3><b>Medical Insurance Information:</b></h3>
<p>
Insurance Provider  <input type="text" name="insurance"  />
Phone Number  <input type="text" name="insphnum" size="13" maxlenth="12"/>
Policy Number  <input type="text" name="polnum" size="20" /></br>
</p>

<p>Are the any special medical conditions we need to know about?<br />
<textarea name="med" cols="60" rows="5">
Please enter any important information here
</textarea>
</p>

<p>Do you authorize the school to seek medical attention in cases of emergency?
<select name="medatt">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>


<p><input type="reset" /> <input type="button" name="next" value=
" Next" onclick="nextForm()" /></p>
</form>
</body>
</html>






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Registration</title>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function confirmReset() {
		var resetForm = confirm(
				"This will clear all the information. Are you sure?");
		if (resetForm == true)
				return true;
		return false;

}
function nextForm() {
	document.cookie = encodeURI("&height=" +
			 document.forms[0].height.value);
	document.cookie = encodeURI("&weight=" +
			 document.forms[0].weight.value);

}
function submitForm() {
	var savedData = "?" + decodeURI(document.cookie);
	savedData += "&height=" + document.forms[0].height.value;
	savedData += "&weight=" + document.forms[0].weight.value;
	if (document.forms[0].subject[0].checked == true)
			savedData += "&subject=Math";
	else if (document.forms[0].subject[1].checked == true)
		 savedData += "&subject=English";
	else if (document.forms[0].subject[2].checked == true)
		 savedData += "&subject=History";
	else if (document.forms[0].subject[3].checked == true)
		 savedData += "&subject=Science";
	else if (document.forms[0].subject[4].checked == true)
		 savedData += "&subject=Other";


	top.location.href="Registration.html" + savedData;
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body bgcolor="#cccccc">
<h2><img src="contract.png"> UOP High School - Student Registration Form</h2><hr>

<h3>Child's Personal Information:</h3>
<form action="" method="get" enctype="application/x-www-form-urlencoded"onreset="return confirmReset();">
<p>What is your child's height?<br />
<input type="text" name="height" size="2" />
</p>

<p>What is your child's weight?<br />
<input type="text" name="weight" size="3" /> lbs.
</p>

<p>
<b>What is your child's favorite subject?</b>
<input type="radio" name="subject" value="math" />Math
<input type="radio" name="subject" value="english" />English
<input type="radio" name="subject" value="history" />History
<input type="radio" name="subject" value="science" />Science
<input type="radio" name="subject" value="other" />Other
</p>

<hr>


<p><input type="reset" />
<input type="button" value="Submit Registration" onclick="submitForm();" /></p>
</form>
</body>
</html>


This is the code I would like to use to create the "Thank You" letter. I'm just not sure how to manipulate the language:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Registration Complete</title>
</head>
<body bgcolor="#cccccc">
<h2><img src="contract.png">Registration Complete</h2>
<p><strong>Thank you for registering with our school.</strong></p>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var formData = decodeURI(location.search);
formData = formData.substring(1, formData.length);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	document.write(formArray[i] + "<br />");

	}

	// I added the code below showing you how you can parse exactly what you want from each location of the array.

	for (var i=0; i < formArray.length; ++i) {

		document.write("Thank you for signing Mr." + formArray[i].indexOf('=') + "<BR>");   // writes out the position of the equal =
		
		
		var eqIndex= formArray[i].indexOf('=');  // store the position in a variable
		document.write("<B>position of ';' sign  </B>" + formArray[i].indexOf(';') + "<BR>");   // writes out the position of the equal;
		var semclnIndex= formArray[i].indexOf(';');  // similarly store the position of the; in a variable

		//eqIndex == -1 OR semclnIndex == -1  notice that if either one is -1 then you may not have entered a value, so you can create the form letter using only required fields

		 if (formArray[i]==0)
			document.write("<B> No value entered! </B><BR><BR>"); // no value entered
			
		 if (formArray[i]==0 )
				document.write(formArray[i].substring(eqIndex+1,formArray[i].length) + "<BR><BR>");  // these don't have an ending ";", so use the whole length


		 if (eqIndex != -1 && semclnIndex != -1)
			document.write(formArray[i].substring(eqIndex+1,semclnIndex) + "<BR><BR>");  // use a substring to print out from one potioon over the = sign position to the position of the semi colon.
	}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</body>
</html>

This post has been edited by kevinm1019: 29 October 2006 - 09:35 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1