Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trouble looping functions in the right order

    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):

    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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>subtotal 
        <TD><INPUT readOnly maxLength=6 size=5 name=tb7></TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>pst</TD>
        <TD><INPUT readOnly maxLength=6 size=5 name=tb8></TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD align=left>gst</TD>
        <TD><INPUT readOnly maxLength=6 size=5 name=tb9></TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD align=left>Total<MAXLENGTH< td> 
        <TD><INPUT readOnly maxLength=8 size=5 name=tb10></TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</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>
    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.
    Last edited by Lisawynn; 02-12-2004 at 03:38 PM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since all you are checking (in the first form anyway) is if the values are empty. It would be much easier to loop thru the form elements than explicitly defining each element. BTW: none of your INPUTS have a type.

    Try this:
    Code:
    <script type="text/javascript">
    function validateForm(form) {
        for (var i=0; i<form.elements.length; i++) {
            if (form.elements[i].value == "") {
                alert('No value entered in '+form.elements[i].name+'.');
                form.elements[i].focus();
                return false;
            }
        }
        return true;
    }
    </script>
    </HEAD>
    
    <BODY>
    <form method="post"
    action="" name="form1" onsubmit="return validateForm(this)">
    
    ........
    Also; can you please return to your first post and add [code] tags so it is easier to read and cut from the forum.

    eg: [code]...CODE HERE...[/code]


    .....Willy

  • #3
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that. I didn't know abou the [code] tags. Thanks for the tip.

    About the input types, when I wrote the script, I included the types (input type="text") but the type gets removed. I keep putting them back in and the next time I check, they are gone. Why would this happen?

    The only thing that I need to change about the script is how the looping is working. Everything else is the way the instructor wants it EXCEPT how the looping is working. (although I appreciate your code for next time and thank you for it).

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <INPUT onclick="checkform_onClick(); checkit(); checkmenu(); checkcardexpiry();" type=button value="send order" name=send>
    Quick-n-dirty, this seem to be your primary problem.

    First "checkform_onClikck() does not infintely loop until all required fields are not blank. When "information.lastname.focus();" executes for example, processing does not stop - flow drops out of the horrifically structured IF/ELSE IF and the functions ends and the next function is called.

    The very next function in line pops up a message as if the order were already validated and processed. Don't you want to check the order over first? And another thing, what happens if I don't check any of those radio buttons? There's no provision for that.

    The next function makes sure I ordered something. Didn't you just alert me that my order would be ready in 30 minutes? Anyway if I didn't order anything the code BREAK;s out and the next function - checkcardexpiry() - is called. If I clicked "cancel" on the alert guess what happends? The same function - checkcardxpiry() is called. So if I cancel you check my credit card?!


    Here is some skeleton pseudo-code that will give you back the logic and control you need:
    PHP Code:
    <input  type=button value="send order" onclick="processOrder();"

    . . . 

    function 
    processOrder () {
       var 
    validForm true;
        
    errorMsg = new String ("There is a problem with your order\n");

       
    validForm validateCustomerInfo();
       
    validForm checkOrder();
       
    validForm checkPayment();
       
    validForm checkDeliveryMode();

       if (
    validForm)  {
          
    // prompt user to verify or cancel the order
          // submit the order if verified
       
    }else{
          
    alert (errorMsg);
       }
    // processOrder()


    function validateCustomerInfo () {
       var 
    validForm true;

       for (var 
    i=0i<number-of-fieldsi++) {
          if (
    field is blank) {
             
    validForm false;
             
    errorMsg += "\nwhatever this field is cannot be blank";
          }
       }

       return 
    validForm;
    }


    function 
    checkOrder() {
       var 
    validOrder false;

       for 
    each item on the menu {
          if (
    thisItem is not blank)   // user entered a quantity
             
    validOrder true;
          }
       }

       if (!
    validOrder) {
          
    errorMsg += "\nHay! you gotta order something";
       }

       return 
    validOrder;
    }


    function 
    checkPayment () {
       var 
    validPayment true;

       switch (
    payment Method) {
          case: 
    'cash'
             
    // whatever;
             
    break;

           case 
    'visa':
              
    validPayment processCard ('visa');
              break;

            case 
    'mastercard' :
               
    validPayment processCard ('mastercard');
               break;

             default:
                 
    errorMsg += "\nInvalid payment method";
                 
    validPayment false;
       } 
    // switch

       
    return validPayment;
    }

    function 
    checkDeliveryMode () {
       var 
    validMode true;

       switch (
    deliver mode) {
          case 
    "pickup":
              
    //ok
              
    break;

          case 
    "delivery":
              
    //ok
              
    break;

           case 
    "eat in":
              
    // ok
              
    break;

           default:
               
    errorMsg += "\ninvalid delivery choice";
               
    validMode false;
       }

       return 
    validMode;

    Last edited by RadarBob; 02-12-2004 at 07:19 PM.

  • #5
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am a beginner (I started learning this past December) and I would appreciate comments/suggestions/assistance that support my attempts at learning rather than having someone negatively criticize my "horrifically structured if/else statement" and the additional sarcasm. I know it doesn't work properly, why do you think I am asking for assistance? If you cannot provide assistance without the negative statements, thanks but no thanks.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops. sorry. I apologize if I offended. We've all "been there."


  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what looping u refering to?

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem. Thanks for the apology. Friends?

    Great quote. I posted the code in my original thread and if you run it, you will see the mess that exists. We are not to include anything that was not asked for in the assignment which is why there are some functions missing that you would normally incorporate or have validated in a real menu. It is supposed to be a very simple, beginner script with just the basics, nothing fancy. It should:
    check to make sure all of the personal information is entered
    check to make sure at least one item was ordered
    calculate the total
    if a credit card is selected, the expiry date should be checked (not the whole credit card number - just the expiry date) and finally
    if one of the radio boxes is checked, it should tell the user when their order will be ready and thank them for ordering. The assignment doesn't say what should happen if a radio box is not checked so I am not worrying about it. No extra bells and whistles. I think it works okay up until the credit card validating and "thanks for your order" parts. They either run when they are not suppose to or not at all. Thanks.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem. Thanks for the apology. Friends?
    Absolutely. And thank you. Barkeep, red beer for my friends and whiskey for my horses.

    One thing we/I have to guard against on the job is getting personal about the code. It's THE code, not MY code (repeat as necessary).

    The assignment doesn't say what should happen if a radio box is not checked so I am not worrying about it.
    You are the best judge of how your instructor will view the behavior of the web page in this case. IMHO I'll call it "derived requirements". In any case, "Error Trapping 101" says that there should always be a final "else" for IFs and a "default" case for switch. It's easier to trap it there than debug hundreds of lines of code later w/out it. Trust me.

    if one of the radio boxes is checked, it should tell the user when their order will be ready and thank them for ordering.
    Sure, IF but not WHEN - not necessarily when the user clicks on the radio button.

    Don't second guess the user
    You cannot predict in what order the user will fill out the form. Nor should you force the user to fill it out in a lock-step manner. Thus throwing up a "thank you" at the "onclick" of the radio button will make no sense to the user if that's the first field (s)he's touched on the form! It makes sense to say thank you after everythings been checked and verified.

    credit card info
    Likewise it makes no sense to verify credit card info when the user selects payment 'visa' or enters the card number or month or year. Again you cannot predict what order the user will enter things. The best place for that is when the user clicks "send order". Disabling the credit card info fields when 'cash' is selected is a very good thing.

    So we're about at the point where all these checks need to be done when the user says "ok I'm done, here's my order". Now we can check it for completness.

    Order Totaling
    That said, I do like the "total up order" button. This will allow the user to see the total cost before (s)he commits the order with the "send order" button. Nonetheless the order total must be checked upon "send order". For all you (the code) knows the user entered a valid order, clicked the "total up order" button then deleted it all, then clicked "send order".

    NOTE: the total up order button should do just that, and no more. If a quantity field is blank, well things should just total up to zero. DO NOT ASSUME that the user has completed his order when she clicks "total up order". You can ASSUME that when the user clicks "send order."

    BTW you could do a running calculation of the item sub-totals, totals & tax by calling a calculation function at the "onblur" of the quantity field. This would make the total button unnecessary. But it the assignment specifies the button, do that instead. It will be the same calculation function in any case.

    Vital Information section
    Keeping with the spirit of things, all the "onblur" and "onclick" stuff in all the "vital information" section should be deleted. You must allow the user to enter the information in any order desired. The code that's in there now is in effect PRESUMING data is being entered in a specified order.

    You can give the users a clue as to what's required and what's optional - say with an asterisk or a different color - be sure to say on the page what that symbol / color means!

    If the desired behavior is to put focus on a required field that is empty, then that should be the last thing that's done. The current code calls multiple functions after it sets focus. Who knows what's going on to cause that field to lose focus. I think that by putting focus on a field THEN putting up an alert box that must be clicked to dismiss you will lose that focus.

    bottom line big picture
    EVERYTHING must be verified when "send order" is clicked - even if there is verification code "at the point of entry" (onclick or onblur).

    You can calculate running item sub-totals, totals, tax as the user enters quantities for each item (using onblur). Items that are blank just get zero.

    The pseudo-code I wrote earlier demonstrates how you can check the various pieces of the form and control wether you stop processing and display appropriate error messages or submit the order.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •