Head Rush Ajax

you’re on your way 4

163

asynchronous applications

function getSize() {

var sizeGroup = document.forms[0].size;

for (i=0; i<sizeGroup.length; i++) {

if (sizeGroup[i].checked == true) {

return sizeGroup[i].value;

}

}

}

If we’ve found the option that is checked,

then return the value of that item.

orderCoffee() will call this function to

nd out what size coffee was ordered.

“document” is the entire web page,

and forms[0] is the rst form on

that page. Then, “size” is the name

of the <input> elements that let

users select their drink size.

Since there is more

than one element

named “size”, this

variable will be a

group of elements,

not just a single

<input> element.

This line loops through all the

elements in the “size” grouping...

...and this line checks to see if the

current element is checked (selected).

The returned value will be either “small”,

“medium”, or “large”, which is exactly what

the orderCoffee() function needs.

Getting the value of a radio group

The key to getting the size and beverage that Jim selected is

realizing that there are three different <input> elements, all

named “size” (and “beverage”). So you need to gure out which

of these three is currently selected:

It’s your turn to work with radio <input> elements.

First, open up coffee.js and add the orderCoffee(),

sendRequest(), and getSize() functions that we’ve

looked at over the last few pages.

Next, you need to writ ...