Help with Javascript carrying forward information

theViper · 01-27-2013, 01:49 PM

Hello everyone, I am new to this forum but i'm hoping you will all go easy on me! I am currently doing an e-commerce website for my course, and I have run into difficulty with the checkout page. Let me note, that this website only requires HTML, CSS, Javascript and cgi/perl (no php, ajax, etc). My web order structure is: frameset page-->
products page-->address details-->control page-->confirmation page.

Any how I am unable to carry forward the 'address details' values forward.

Currently my codes are:

Frameset page named "products2.html"

Code:

<HTML>

<HEAD>

<TITLE>Products Page</TITLE>

</HEAD>

<FRAMESET COLS="*,10" BORDER="0">

<FRAME SRC="products.html">

<FRAME SRC="control.htm">

</FRAMESET>

</HTML>

products.html page:

Code:

	<javascript>
	function processproducts() {

 products = document.forms["choices"]

 if(products.total.value=="" || products.total.value=="0")

  alert("You must select item and quantity!")

 else {

  controlForm = parent.frames[1].document.controlForm

  controlForm.total.value=products.total.value

  controlForm.myTextArea.value=products.myTextArea.value

  location.href="ship.html"

 }

}	</script>

	<form Action="" method="post"form name="choices" >

	
	<table>

	<tr><td>The Value of your order in £s is:</td></tr>

	<tr><td><input type=text name="total" size=12></td></tr>

	<tr><td>Products Ordered:</tr></td>

	<tr><td><textarea name="myTextArea" value="Blank" rows=6 cols=60>

	</textarea></td><tr>

	<tr><td><input type=button value="Sub-Total" onClick=submitOrder()></td></tr>

	<tr><td><input type=reset value="Clear"></td></tr>
	<tr><td><input type=button Name="next" value="Next" onClick=processproducts()></td></tr>

	</table>

	</form>

ship.html

Code:

<script Language="JavaScript">
function processship() {
  	ship = document.forms["shipDetails"]

 if(ship.firstName.value=="" || ship.firstName.value=="0"|| ship.lastName.value==""|| 
 ship.lastName.value=="0"|| ship.street.value==""|| ship.street.value=="0" || 
 ship.city.value=="0"|| ship.city.value==""|| ship.country.value=="0"|| ship.country.value==""|| 
 ship.postcode.value=="0"|| ship.postcode.value==""|| ship.phone.value==""|| 
 ship.phone.value=="0"|| ship.email.value==""|| ship.email.value=="0")

  alert("Error in shipping details, please correct")

 else{ 
controlForm = parent.frames[1].document.controlForm
	controlForm.lastName.value=ship.lastName.value
  controlForm.firstName.value=ship.firstName.value
  controlForm.street.value=ship.street.value
  controlForm.city.value=ship.city.value
  controlForm.country.value=ship.country.value
  controlForm.postcode.value=ship.postcode.value
  controlForm.phone.value=ship.phone.value
  controlForm.email.value=ship.email.value
  location.href="form3.htm"

 }
}
</script>

<form Action="" form name="shipDetails"  method="post" action="">
<p>First name: <input type="TEXT" name="firstName">
Last name: <input type="TEXT" name="lastName">
 </p>
<p>Street address:
 <input type="TEXT" name="street" size="50">
 </p>
<p>City: <input type="TEXT" name="city"></p>
<p>Country: <input type="TEXT" name="country">
 Postal code: <input type="TEXT" name="postcode"></p>
<p>Phone number: <input type="TEXT" name="phone"></p>
<p>E-mail address: <input type="TEXT" name="email" size="30">
 </p>
<p></p>
<input type=button name="next" value="Confirm Order" onClick=processship() >
</form>

controlForm.htm

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
// --></SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="http://.../cgi/thanks.cgi"
 NAME="controlForm"
 METHOD="post" TARGET="_top">
<INPUT TYPE="HIDDEN" NAME="firstName" VALUE="">
<INPUT TYPE="HIDDEN" NAME="lastName" VALUE=""> 
<INPUT TYPE="HIDDEN" NAME="street" VALUE="">
<INPUT TYPE="HIDDEN" NAME="city" VALUE=""> 
<INPUT TYPE="HIDDEN" NAME="postcode" VALUE="">
<INPUT TYPE="HIDDEN" NAME="phone" VALUE=""> 
<INPUT TYPE="HIDDEN" NAME="email" VALUE=""> 
<INPUT TYPE="HIDDEN" NAME="total" VALUE="">
<INPUT TYPE="HIDDEN" NAME="myTextArea" VALUE="">
</FORM>
</BODY>
</HTML>

My confirmation page will be generated by .cgi

I would be very grateful if anyone could have a look and see where my coding has gone wrong especially as when I get to "ship.html" and click the submit button, it does not

Philip M · 01-27-2013, 05:05 PM

Be aware that the <frameset> tag is not supported in HTML5. In other words, is obsolete.

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). The  comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

To pass data from one page to another will require you to use a cookie.

Have you tried using your error console?

David was a Hebrew king who was skilled at playing the liar.
- Pupil's answer to Catholic Elementary School test.

Old Pedant · 01-28-2013, 03:35 AM

Are you using a debugger? If not, way past time that you were.

I would personally recommend using CHROME browser. Its debugger is, I think, the easiest to use.

But you should also learn how to debug your code in other ways.

Just for starters, you should change all the HIDDEN fields in controlform.html page to text fields, so you can *immediately* see if they are getting the values you think they should.

An easy way to do that is to change <input type="hidden"> to <input xxtype="hidden">[/icode]. xxtype is meaningless and so will be ignored by the browser and all your fields will then be text fields, by default.