I am participating in a JavaScript class and was given an assignment to create an online menu form. I am having trouble with the looping sequence of the different functions. I need to get the script to pause and wait for the user to enter all of the required information before thanking them and processing their order. There are a few functions but the ones I am having the trouble with in the sense of starting and pausing for further information are as follows:
The first function (part of form 1) gets their personal information such as name, address, etc. and checks to make sure all the information has been added correctly (numerical when required), the second function (part of form 2) takes their order information - the user must order at least one item. The third function (part of form 2) is executed when total up order is clicked (calculates theh total of their order). The fourth function (part of form 3) checks to see what method of payment the user selected. If cash is selected, and everything before that is valid, then the Thank you for your Order alert should display, end of story. If visa or mastercard is selected and the date is expired, then the user should have to return to this to either change to cash or amend their expiry date. I think I am almost there but am having trouble getting the functions to function in the right order. Below is the script (a little bit long):
Before posting, I copied the script from this page and tried to run it. You may get a runtime error message indicating line 154: g is undefined. You need to remove the break in the line that evaluates the total of the menu items (hamburger+cheeseburger+etc...... ) This did not happen until I posted the script and then copied it back to notepad into a different file (?).
Any assistance/suggestions/comments would be appreciated. Thank you for your time.
The first function (part of form 1) gets their personal information such as name, address, etc. and checks to make sure all the information has been added correctly (numerical when required), the second function (part of form 2) takes their order information - the user must order at least one item. The third function (part of form 2) is executed when total up order is clicked (calculates theh total of their order). The fourth function (part of form 3) checks to see what method of payment the user selected. If cash is selected, and everything before that is valid, then the Thank you for your Order alert should display, end of story. If visa or mastercard is selected and the date is expired, then the user should have to return to this to either change to cash or amend their expiry date. I think I am almost there but am having trouble getting the functions to function in the right order. Below is the script (a little bit long):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>JavaScript Eatery</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2800.1126" name=GENERATOR></HEAD> <BODY onload=disabled1()> <P align=center><B>The JavaScript Eatery</B> <SCRIPT language=javascript> //form1 //vital information function checkform_onClick(){ var information=document.form1; if(information.firstname.value == "" || information.lastname.value == "" || information.streetnumber.value=="" || information.streetname.value == "" || information.city.value == "" || information.postalcode.value == "" || information.phonefirst.value == "" || information.phonesecond.value == "" || information.email.value == "") { alert("Please complete the entire form."); if(information.firstname.value=="") { information.firstname.focus(); } else { information.lastname.focus(); } if(information.lastname.value=="") { information.lastname.focus(); } else { information.streetnumber.focus(); } if(information.streetnumber.value=="") { information.streetnumber.focus(); } else { information.streetname.focus(); } if(information.streetname.value=="") { information.streetname.focus(); } else { information.city.focus(); } if(information.city.value=="") { information.city.focus(); } else { information.postalcode.focus(); } if(information.phonefirst.value=="") { information.phonefirst.focus(); } else { information.phonesecond.focus(); } if(information.phonesecond.value=="") { information.email.focus(); } else { information.email.focus(); } } } function streetnum_onblur(){ var streetnum=document.form1.streetnumber; if(isNaN(streetnum.value)==true) { alert("Please enter a valid address"); streetnum.focus(); streetnum.select(); } } function phonefirst_onblur(){ var phonefirst=document.form1.phonefirst; if(isNaN(phonefirst.value)==true) { alert("Please enter a valid phone number"); phonefirst.focus(); phonefirst.select(); } } function phonesecond_onblur(){ var phonesecond=document.form1.phonesecond; if(isNaN(phonesecond.value)==true) { alert("Please enter a valid phone number"); phonesecond.focus(); phonesecond.select(); } } //form2 //validate order menu function checkmenu(){ while(document.form2.tb1.value=="" && document.form2.tb2.value=="" && document.form2.tb3.value=="" && document.form2.tb4.value=="" && document.form2.tb5.value=="" && document.form2.tb6.value=="") { alert("You must order at least one item"); a=confirm("Click ok to continue. Click cancel to exit") if(a==false) { break; } else { checkcardexpiry(); } } } //form2 //menu items function evalmenu(){ var hamburger=(document.form2.tb1.value != '') ? eval(document.form2.tb1.value) : 0; var cheeseburger=(document.form2.tb2.value != '') ? eval(document.form2.tb2.value) : 0; var chickenburger=(document.form2.tb3.value != '') ? eval(document.form2.tb3.value) : 0; var fries=(document.form2.tb4.value != '') ? eval(document.form2.tb4.value) : 0; var gravy=(document.form2.tb5.value != '') ? eval(document.form2.tb5.value) : 0; var chili=(document.form2.tb6.value != '') ? eval(document.form2.tb6.value) : 0; document.form2.tb7.value=hamburger+cheeseburger+chickenburger+fries+gravy+chili; var subtotal=document.form2.tb7.value var tax=.07 var pst=(document.form2.tb8.value=subtotal * tax) ? eval(document.form2.tb8.value): 0; document.form2.tb8.value=Math.round(pst*100)/100; var gst=(document.form2.tb9.value=subtotal * tax) ? eval(document.form2.tb9.value): 0; document.form2.tb9.value=Math.round(gst*100)/100; document.form2.tb10.value=eval(subtotal+"+"+pst+"+"+gst); document.form2.tb10.value=Math.round(document.form2.tb10.value*100)/100; } //form3 //drop down menus function disabled1(){ if(document.form3.s1[0].selected==true) { document.form3.tb12.disabled=true document.form3.s2.disabled=true document.form3.s3.disabled=true } if(document.form3.s1[1].selected==true) { document.form3.tb12.disabled=false document.form3.s2.disabled=false document.form3.s3.disabled=false } if(document.form3.s1[2].selected==true) { document.form3.tb12.disabled=false document.form3.s2.disabled=false document.form3.s3.disabled=false } } //form3 //radio buttons var eatoptions=new Array("pickup","delivery","eat in") function checkit(){ if(document.form3.r1[0].checked==true){ alert("Your order will be ready in 10 minutes"); } if(document.form3.r1[1].checked==true){ alert("Your order will arrive in 20 minutes"); } if(document.form3.r1[2].checked==true){ alert("Your table will be ready in 5 minutes"); } } //form3 //validate credit card expiry function checkcardexpiry(){ var information=document.form1 if(document.form3.s1[0].selected==true) { alert("your order is being processed") } else if(document.form3.s1[1].selected==true && document.form3.s1[2].selected==true) { switch(document.form3.s2.value){ case "1": if(document.form3.s2[1].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "2": if(document.form3.s2[2].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "3": if(document.form3.s2[3].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "4": if(document.form3.s2[4].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "5": if(document.form3.s2[5].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "6": if(document.form3.s2[6].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "7": if(document.form3.s2[7].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "8": if(document.form3.s2[8].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "9": if(document.form3.s2[9].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "10": if(document.form3.s2[10].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } case "11": if(document.form3.s2[11].selected==true) { alert("Thank you for your credit card information") alert("Your order is being processed") break } default: alert("Your credit card has expired") break } } } //form3 //reset form function renew(){ document.form1.reset(); document.form2.reset(); document.form3.reset(); disabled1(); } </SCRIPT> <FORM name=form1> <DIV align=center> <TABLE><ALIGN=CENTER> <TBODY></TBODY></TABLE> <TABLE border=1> <COLGROUP> <COL align=left> <COL> <COL align=top width="20%"><!--personal information table--> <TBODY> <TR> <TD> <TABLE border=0> <TBODY> <TR> <TR> <TH align=middle colSpan=2><B>vital information</B></TH></TR> <TR> <TD>first name</TD> <TD><INPUT maxLength=12 size=12 name=firstname></TD></TR> <TR> <TD>last name</TD> <TD><INPUT maxLength=12 size=12 name=lastname></TD></TR> <TR> <TD>street number</TD> <TD><INPUT onblur=streetnum_onblur() maxLength=12 size=12 name=streetnumber> </TD></TR> <TR> <TD>street name</TD> <TD><INPUT maxLength=12 size=12 name=streetname></TD></TR> <TR> <TD>city</TD> <TD><INPUT maxLength=12 size=12 name=city></TD></TR> <TR> <TD>postal code</TD> <TD><INPUT maxLength=12 size=12 name=postalcode></TD></TR> <TR> <TD>phone number</TD> <TD><INPUT onblur=phonefirst_onblur() maxLength=3 size=3 name=phonefirst>-<INPUT onblur=phonesecond_onblur() maxLength=4 size=4 name=phonesecond></TD></TR> <TR> <TD>email address</TD> <TD><INPUT maxLength=12 size=12 name=email></TD></TR></TBODY></TABLE> <TD vAlign=top>comments or special request <BR><TEXTAREA rows=8 cols=30></TEXTAREA></TD></TR></TBODY></TABLE></TD> <P> <P> <HR width="80%"> </FORM> <FORM name=form2><BR><!--Menu table--> <TABLE> <TBODY></TBODY></TABLE> <TABLE cellSpacing=5 border=0> <TBODY> <TR> <TD align=middle><B>item</B> </TD> <TD><B>price</B> </TD> <TD><B>quantity</B> </TD> <TD><B>sub-total</B> </TD> <TD> </TD> <TD><B>item</B> </TD> <TD><B>price</B> </TD> <TD><B>quantity</B> </TD> <TD><B>sub-total</B> </TD></TR> <TR> <TD>Hamburger</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$2.99 ;> </TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" maxLength=6 size=6 name=tb1></TD> <TD> </TD> <TD>French <BR>Fries</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$2.99></TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" maxLength=6 size=6 name=tb4></TD></TR> <TR> <TD align=middle>Cheeseburger</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$3.99></TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" maxLength=6 size=6 name=tb2></TD> <TD> </TD> <TD><INPUT type=checkbox> gravy</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$0.50></TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" maxLength=6 size=6 name=tb5></TD></TR> <TR> <TD>Chicken <BR>Burger</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$4.99></TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" maxLength=6 size=6 name=tb3></TD> <TD> </TD> <TD><INPUT type=checkbox> chili</TD> <TD align=left><INPUT onfocus=this.blur() maxLength=6 size=6 value=$1.99></TD> <TD align=left><INPUT maxLength=3 size=3></TD> <TD align=left><INPUT type="text" type="text" maxLength=6 size=6 name=tb6></TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD>subtotal <TD><INPUT readOnly maxLength=6 size=5 name=tb7></TD> <TD> </TD> <TD> </TD> <TD> </TD> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD>pst</TD> <TD><INPUT readOnly maxLength=6 size=5 name=tb8></TD> <TD> </TD> <TD> </TD> <TD> </TD> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD align=left>gst</TD> <TD><INPUT readOnly maxLength=6 size=5 name=tb9></TD> <TD> </TD> <TD> </TD> <TD> </TD> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD align=left>Total<MAXLENGTH< td> <TD><INPUT readOnly maxLength=8 size=5 name=tb10></TD> <TD> </TD> <TD> </TD> <TD> </TD> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD align=middle colSpan=2><INPUT onclick=evalmenu() type=button value="total up order" name=tb11> <TD></TD></TH></TD></TD></TR></TBODY></TABLE><BR> <HR width="80%"> <BR></FORM> <FORM name=form3 <!--Payment table--> <TABLE> <TBODY></TBODY></TABLE> <TABLE cellSpacing=5 border=1> <TBODY> <TR> <TD align=middle>Payment </TD> <TD align=middle>card number </TD> <TD align=middle colSpan=3>expiration month</td> <TD align=middle>year </TD> <TD align=left rowSpan=2><INPUT type=radio name=r1>pickup <BR><BR><INPUT type=radio name=r1>delivery <BR><INPUT type=radio name=r1>eat in</TD></TR> <TR> <TD align=middle><SELECT onchange=disabled1() name=s1> <OPTION value=0 selected>cash</OPTION> <OPTION value=1>visa</OPTION> <OPTION value=2>mastercard</OPTION></SELECT> </TD> <TD align=middle><INPUT type="text" name=tb12 maxLength=16 size=16></TD> <TD align=middle colSpan=3> <SELECT name=s2> <OPTION value=0 selected>01</OPTION> <OPTION value=1>02</OPTION> <OPTION value=2>03</OPTION> <OPTION value=3>04</OPTION> <OPTION value=4>05</OPTION> <OPTION value=5>06</OPTION> <OPTION value=6>07</OPTION> <OPTION value=7>08</OPTION> <OPTION value=8>09</OPTION> <OPTION value=9>10</OPTION> <OPTION value=10>11</OPTION> <OPTION value=11>12</OPTION></SELECT> <TD align=middle><SELECT name=s3> <OPTION value=0 selected>04</OPTION> <OPTION value=1>05</OPTION> <OPTION value=2>06</OPTION> <OPTION value=3>06</OPTION></SELECT></TD> <DIV></DIV></TR></TBODY></TABLE><BR><INPUT onclick=renew() type=button value="clear order" name=clear> <INPUT onclick="checkform_onClick(); checkit(); checkmenu(); checkcardexpiry();" type=button value="send order" name=send> </FORM></DIV></BODY></HTML>
Any assistance/suggestions/comments would be appreciated. Thank you for your time.
Comment