Javascript Tutor
- Lesson 20
Forms and javascript
We've already done a little with forms. We're going to do a little more.
Exercise: Just for the sake of refreshment, make a text box and a button.
When the user clicks the button, whatever is in the text box gets thrown up
in an alert box.
You know, now that I'm thinking about it, when you see these examples, and when
you do your own scripting, you may find that there are different ways to do
things. You can take a script and often condense it into fewer and more efficient
instructions. Over time, you will certainly pick up a trick here and there to
make your scripts leaner and more compact. You should know that the examples
in this tutorial are deliberately scripted in a simple, loose and easy to understand
manner. My job is to have you learn, not try to impress you with how confusing
I can make things. If someone should tell you that there is another way to skin
that cat, they're probably right. But rest assured, everything here is perfectly
fine code, and more importantly, is written plainly enough to be understood
by a beginner.
Exercise: Make three more text boxes(inputs) a little further down the
page. Alter the script so that when you click the button, the contents of box
1 move to box 2, the contents of box 2 move to box 3, the contents of box 3
move to box 4, the contents of box 4 go bye-bye, and box 1 is cleared. Hint:
there is no "clear" method for text boxes... you can however set it's
value to "".
A common type of form element is the radio button. Consider the following script...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox()
{
alert(window.document.myform.fruit.value);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'peaches'">Peaches, Nectarines & Plums<BR>
Choose your favorite and <A HREF="javascript:FruitBox()">click
here</A>.
</FORM>
</BODY>
</HTML>
Try it.
There are a few things to understand here. One, notice that while there are
three separate elements, the three radio buttons share a name, therefore they
have only one value. Even though we'll see that they can be individually referenced
and manipulated, they are still a group and can even be thought of as a single
input.
Also notice that when the page is first loaded, the value of that set of buttons
is "undefined". (Even when we check a button via HTML the JS value
still comes back as undefined. Go figure.) When we click one of the radio buttons,
an onClick event handler sets the value of the group. When we click the link,
the function simply reads the value that has been set by the onClick.
Understand what's going on before you continue.