We've already done a little with forms. We're going to do a little more. Forms and javascript are like milk and cereal. Milk is good and cereal is good. But they're even better together ;-)
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, consistent 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 "".
Again, not the most useful script in the world. But look at it this way... think of how much javascript you understand compared to when you started these lessons. You've come a long way baby!
A common type of form element is the radio button. Consider the following script...
<html>
<head>
<title></title>
<script type="text/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>
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 if 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.
| Javascript Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
| Javascript Authoring Guide JavaScript FAQ |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
