Announcement

**Willy Duitt** · Feb 12, 2004, 10:34 AM

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([color=blue]form[/color]) {
    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" [color=red]onsubmit="return validateForm([/color][color=blue]this[/color][color=red])"[/color]>

........

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

**Lisawynn** · Feb 12, 2004, 10:44 AM

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

**RadarBob** · Feb 12, 2004, 02:07 PM

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=0, i<number-of-fields, i++) {

      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;

}

**Lisawynn** · Feb 12, 2004, 02:23 PM

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.

**RadarBob** · Feb 12, 2004, 02:29 PM

oops. sorry. I apologize if I offended. We've all "been there."

**Garadon** · Feb 12, 2004, 02:43 PM

what looping u refering to?

**Lisawynn** · Feb 12, 2004, 03:04 PM

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.

**RadarBob** · Feb 12, 2004, 04:54 PM

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.

Announcement

trouble looping functions in the right order

trouble looping functions in the right order

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment