The first form allows the user to enter a number and press the button to get the sum of the numbers from one to the number entered. The form used is shown here.
<FORM NAME=form><BR> <TABLE> <TR><!--Row 0--> <TD><!--Column 0--> Enter your number here <INPUT TYPE=TEXT NAME=inval VALUE="0" > </TD><!--End Column 0--> </TR><!-- End Row 0--> <TR><!--Row 1--> <TD><!--Column 0--> Your sum is
<TEXTAREA NAME=outVal ROWS = 2 COLS = 30 ></TEXTAREA> </TD><!--End Column 0--> </TR><!-- End Row 1--> <TR><!--Row 2--> <TD><!--Column 0--> <INPUT TYPE=BUTTON NAME=compute VALUE="compute" onClick="calculate();" > </TD><!--End Column 0--> </TR><!-- End Row 2--> </TABLE></FORM>
The function that computes the values is given below. Notice that the value must be converted from a string to an integer. In this case this can be done either by applying eval to the string returned or parseInt. parseInt works in almost all conversions, so it is better to use it.
function calculate()
{
var
val = 0,
end = parseInt(document.form.inval.value);
var i;
for(i=1;i<=end;i++)
val+=i;
document.form.outVal.value=val;
}
When working with radio buttons (or checkboxes-shown below) the easiest way to get a value recorded instantly is to associate the onClick event with a JavaScript function. The following code results in the set of radio buttons below.
<FORM NAME=form1><BR> <TABLE> <TR><!--Row 0--> <TD><!--Column 0--> <INPUT TYPE=RADIO NAME=limit VALUE=1 onClick="getVal(this.value);" > one <INPUT TYPE=RADIO NAME=limit VALUE=2 onClick="getVal(this.value);" CHECKED> two <INPUT TYPE=RADIO NAME=limit VALUE=3 onClick="getVal(this.value);" > three </TD><!--End Column 0--> </TR><!-- End Row 0--> <TR><!--Row 1--> <TD><!--Column 0--> <TEXTAREA NAME=buttonValue ROWS = 2 COLS = 32 ></TEXTAREA> </TD><!--End Column 0--> </TR><!-- End Row 1--> </TABLE></FORM>
When you select a button the value of that button is printed by the script given here.
function getVal(val)
{
document.form1.buttonValue.value = val;
}
<FORM NAME=form2><BR> <TABLE> <TR><!--Row 0--> <TD><!--Column 0--> What is your favorite Color?<BR> <INPUT TYPE=RADIO NAME=buttons VALUE=red> Red <INPUT TYPE=RADIO NAME=buttons VALUE=blue> Blue <INPUT TYPE=RADIO NAME=buttons VALUE=green> Green <INPUT TYPE=RADIO NAME=buttons VALUE=purple> Purple </TD><!--End Column 0--> </TR><!-- End Row 0--> <TR><!--Row 1--> <TD><!--Column 0--> <TEXTAREA NAME=out ROWS = 2 COLS = 32 ></TEXTAREA> </TD><!--End Column 0--> </TR><!-- End Row 1--> <TR><!--Row 2--> <TD><!--Column 0--> Press to see your color <INPUT TYPE=BUTTON NAME=show VALUE = Press onClick="indexSel();" > </TD><!--End Column 0--> </TR><!-- End Row 2--> </TABLE></FORM>
The problem in this case is to find out which button has been selected and get the value from that button. You simply have to go through the buttons to figure out which is checked. To do this you first create a variable that represents the group of buttons with the same name. Here opt = document.form2.buttons represents the group of buttons with name buttons. This group has a variable length associated with it and can have individual buttons accessed as a c-type (starting at index 0) array in the order they appear on the page. Only one radio button can be check at a time, so once you find a check button you are done.
function indexSel()
{
var opt= document.form2.buttons;
var output = document.form2.out;
for (var i = 0;i<opt.length; i++)
if(opt[i].checked)
break;
output.value = opt[i].value;
}
Checkboxes can be listed with different names. In this case you have to ask if each has been checked. But as in radio buttons you can treat all checkboxes with the same name as an array. The following menu form sums the users choices as they are made.
<FORM NAME=menu> <TABLE> <DIV STYLE = "color: FFFF00; background-color: FF0000; font-weight: bold; font-size: 14pt; ">The Menu</DIV> <TR><!--Row 0--> <TD> <!--Column 0--> Pizza, $10 <INPUT TYPE=CHECKBOX NAME=item VALUE="10" onClick="sumIt()"><BR> Sandwich, $3.00 <INPUT TYPE=CHECKBOX NAME=item VALUE="3" onClick="sumIt()" ><BR> Burger, $4.00 <INPUT TYPE=CHECKBOX NAME=item VALUE="4" onClick="sumIt()"><BR> Pie, $2.00 <INPUT TYPE=CHECKBOX NAME=item VALUE="2" onClick="sumIt()"><BR> </TD><!--End Column 0--> </TR><!-- End Row 0--> <TR><!--Row 1--> <TD><!--Column 0--> <INPUT TYPE=TEXT NAME=bill VALUE="0" > </TD><!--End Column 0--> </TR><!-- End Row 1--> </TABLE></FORM>
The function that computes the sum must ask each checkbox if it has been check, since more than one can be checked.
function sumIt()
{
var items =document.menu.item;
var sum =0;
for (var i=0;i<items.length; i++)
if(items[i].checked)
sum +=parseInt(items[i].value);
document.menu.bill.value = "Order total: $"+sum;
}
Option lists are the easiest form to retrieve data from. If you were only writing for Internet Explorer, you simply needed to get the value for the select tag. Unfortunately, Netscape doesn't like this solution. Both browsers do allow you to treat the options like an array and pass back the subscript of the selected item in selectedIndex. In this form the function below retrieves the item selected by the user.
<FORM NAME=form3><BR> <TABLE> <TR><!--Row 0--> <TD><!--Column 0--> Select your favorite number <SELECT NAME=numlist onChange="getNum()" > <OPTION VALUE=1> one <OPTION VALUE=2 > two <OPTION VALUE=3> three <OPTION VALUE=4> four <BR> </SELECT><BR> </TD><!--End Column 0--> <TR><!--Row 1--> <TD><!--Column 0--> Your number is<BR> <TEXTAREA NAME=outnum ROWS = 2 COLS = 30 ></TEXTAREA> </TD><!--End Column 0--> </TABLE></FORM>
Notice again that numlist is the Name of the select tag and that you can use a local variable to represent most of the variable. Using the selectedIndex value reduces the work to next to nothing in this case.
function getNum()
{
var
opt = document.form3.numlist;
document.form3.outnum.value = opt.options[opt.selectedIndex].text+
" "+opt.options[opt.selectedIndex].value;
}