Menu form: Order required

  1. Customer name required
  2. Menu form
  3. Display all required fields

It doesn’t do much good to require a customer name without also requiring that the customer choose something to order. If you look at the HTML, there are three groups of radio buttons involved in ordering: the “drinks” group, the “sides” group, and the “dishes” group. We need to check to see that at least one of those items is checked.

However, radio buttons are part of a group: there is usually more than one radio button with the same name. Using form[groupname] will return a list of all of those radio buttons. You can see this by typing “javascript:window.alert(document.forms.menu['sides'])”. It should say something like “object collection”. We need a function that will return the value of the selected radio button.

function radioValue(form, radioGroup) {

var buttons = form[radioGroup];

for (var button=0;button<buttons.length;button++) {

if (buttons[button].checked) {

return buttons[button].value;

}

}

return false;

}

Test this by typing “javascript:window.alert(radioValue(document.forms.menu, 'sides'))” in the URL bar. If no side is selected, the alert box should say “false”. If a side is selected, the code for that side should display.

Add this to the verifyOrder function, before the line that checks customerField.value:

if (!(

radioValue(form, 'drinks') ||

radioValue(form, 'sides') ||

radioValue(form, 'dishes'))

) {

document.getElementById('orders').style.backgroundColor = "red";

window.alert("Please choose something to eat and/or drink.");

return false;

} else {

document.getElementById('orders').style.backgroundColor = "inherit";

}

Now, if you try to submit your order before choosing something from one of the menus, you’ll be alerted, and the form will not submit. If you choose something from one of the menus, but don’t type something in the name box, you’ll be alerted to the latter error. Only if you both choose something from the menu and type something in the name box, will the form submit.

Radio buttons

Radio buttons almost always have values, whether they’re selected or not. With radio buttons (as with checkboxes), the important property is checked. If the radio button is checked, it’s value will be submitted. The checked property is either true or false.

Order required: For loops

We’ve seen while loops already, but not for loops. The “for” loop has three sections in the parentheses, each separated by a semicolon from the others. First, there’s the initializer. In this case, that’s “var button=0”. The for loop begins by creating a variable called button and setting it to zero.

Second, there’s the loop test. When the loop test is met, the for loop stops and continues on to the next line following the for loop’s closing brace. In this example, the loop test is “button<buttons.length”. If the list of radio buttons contains four items, for example, then the loop will end if “button” is ever four or more.

Finally, there’s the counting expression. Every time the loop comes around again, it performs the counting expression. The counting expression usually increments and decrements the variable created in the initializer. In this example, the counting expression is “button++”. Each time the loop comes around again, button is incremented by one.

This means that, in this example, button will start at zero, become one, then two, then three, and so on, until it reaches the last item in the list of buttons. For each value of button, the JavaScript between the braces will be performed.

Order required: ||

Two bars (pipes) are another form of compound conditional, like the two ampersands. Double bars mean “or”. So this example means “if there’s a value for drinks or if there’s a value for sides or if there’s a value for dishes”. Then, the exclamation point reverses that. So if there’s a value for anything, the conditional is not met and no alert is displayed.

  1. Customer name required
  2. Menu form
  3. Display all required fields