There is a ton of crap that JavaScript can do to forms. So get ready. It'll be a looooong ride.
First off, you can mess with the contents of a text box with the value variable of the text box object. So you do this:
window.document.form_name.text_box_name.value = whatever;
You can also do the same thing to a text area. Just instead of using the text box name, use the text area name. I'm not going to go much further into that now, as I think it's pretty obvious how to use it by now. Quite frankly, I've done some pretty fun stuff with that information alone, but for your sake I'll keep moving...
Next, we'll mess with checkboxes. To get the value of a checkbox, just navigate to the checkbox (window.document.form_name.checkbox_name). The value is stored in checked. If it is checked, it's value is true. If it isn't, the value is false. True and false are built in variables - true always equals 1, and false always equals 0. Just thought I'd mention it. You can grab the value, and you can change it. Just set it equal to true or false to check or uncheck it. You can test to see if it is checked by just putting the whole thing in an if statement:
if(window.document.form_name.checkbox_name.checked)
{}
If it is checked, it'll be 1, which will execute the statement. If not, it'll be 0 and it'll skip the statement. Nice and easy!
Now onto radio buttons. They're much like checkboxes - they store their value in the checked variable. However, given the usage of the buttons (entire groups reside under the same name), each group is stored in an array with the name of the radio button group. So to check the third member of a group named "my_radio", you'd do this:
window.document.form_name.my_radio[2].checked=true;
Remember, the buttons are stored in an array which uses indexing. So the third member is the second index.
And now we have pulldown boxes. Only the main select tag can be named. The individual options aren't accessible that way. But it's still easy to get to them. They are stored in the array options of the select object. So
window.document.form_name.pulldown_name.options[0]
This grabs the first option.
window.document.form_name.pulldown_name.options [window.document.form_name.pulldown_name.options.length-1]
This gets the last option in the menu. these things wrap, but they shouldn't wrap in the code. You can check to see which one is selected with the variable selectedIndex. This gets the index of the selected item. So if you want the value of the selected item, just do this:
window.document.form_name.pulldown_name.options [window.document.form_name.pulldown_name.selectedIndex]
Again, it wraps here; it shouldn't in your code though. Whew! That's a long line of code, but that's how it's done.
But that's not all. There is also the multiple option in pulldown lists. This allows the user to select multiple options. Don't worry, it's still easy to do. selectedIndex stores the first selected item, and then another variable, selected, stores whether each item is selected or not. So the only way to grab all of the selected items is a for loop! Here it is:
var list = window.document.form_name.pulldown_name;
var j = 0;
var selected_array = new Array;
if(list.selectedIndex > -1)
{
for(var i = list.selectedIndex; i < list.options.length; i++)
{
if(list.options[i].selected)
{
selected_array[j] = list.options[i].text;
J++;
}
}
}else
{
selected_array[0] = "No items selected!";
}
This block of code grabs every selected item and stores them into the array selected_array. And if none are selected it sets the first value of the array to "No items selected!". The first weird thing you'll see is
var list = window.document.form_name.pulldown_name
This sets list equal to that string, so that you don't have to type it EVERY single time you need to access the pulldown list. Then the if statement checks to see if list.selectedIndex (window.document.form_name.pulldown_name.selectedIndex) is 0 or greater. If it is, that means an item has been selected. If not, it's -1 which means nothing is selected. If something has been selected, it goes into the for loop. It starts at list.selectedIndex, because we know that's where the first selected item is. Then the if statement checks to see if the current option is selected. If it is, it stores it into the next item of selected_array and checks the next item. It does this until the list is over. This is pretty much the easiest way to do this.
Remember! With all of the following events, you must put return false; at the end of them! If you don't the page will reload and you won't be able to see the results of each of your code! Just tack it onto the end of whatever code is contained in the event.
Now onto form events. There are a number of them, the first of which is onSubmit. It goes right into the form tag, and it acts like onClick or onMouseover. Just put the necessary code in there. It activates when the submit button is clicked. Pretty self explanatory, but here's an example anyway. To see the code for it, view source (View -> View Source) and press ctrl+f, and enter name="form_2". It'll take you straight to the code for this form.
Now some text field handlers. They work in text boxes and text areas - you just put 'em right into the tag. They are onFocus, onBlur, and onChange. onFocus activates when you click into a text field. onBlur occurs when you click out of or tab out of a text field. And onChange occurs when you change the value of a text field. The one thing that doesn't work as expected is the onChange event. It only activates when onBlur occurs, and only if the value has been changed from what it originally was in that time. So it's basically an onBlur that checks to see if the contents are different from what they originally were. To see the code in action, view source (View -> View Source), hit ctrl+f, and enter name="form_event". It'll take you right to the script tags which contain the code for this form, and below that the form itself.
Explanation: Put the cursor in the box and the bottom box will say "focussed." That is onFocus. Now, press tab - you'll see the bottom box changes to "blurred". That is onBlur. Finally, delete part of the text and press tab. The bottom box will turn to "Changed". That is onChange - it doesn't activate until you blur from the box. One note about onChange - it appears to be fairly tempermental in that it can mess up other JavaScript on a page, so thoroughly test before using, and hope everybody using the handler has the same browsers as you =). An additional note about onChange. If you delete the text and re-type it exactly then blur it, nothing will happen, because it detected no change. onChange only works when a blur occurs when the text is different from what it originally was.
Let me just throw in some functions of text boxes and text areas before moving on. They are blur(), focus(), and select(). They move the cursor out of the affected area, move the cursor INTO the affected area, and select all of the text in the area, respectively. Just use them like so: window.document.form_name.textbox_name.select(). I suppose I'll toss in an example of how they work. To see the source for this, view source and do ctrl+f to find name="form_1". It takes you to the table which contains the form and the links which contain the code to modify the form.
In order for the second option to work, the cursor must be in the box. Now lets look at onClick, which is the familiar link handler. Well, it also works for radio buttons and checkboxes. And it does what it says - when you click the affected button/checkbox, the code in the onClick activates. Like so - Oh, and to see the code behind this, view source, hit ctrl+f and find name="form_3". I put the function right above it in script tags so you'd be able to see it easily when you viewed source.
Remember, for radio buttons you can't just use the name of the button, as there are likely many buttons stored under one name (in an array). You have to put the index of the button you want to use after you enter the name of the button.
Finally, we have the pulldown menu event handler, onChange, which you've already seen this lesson. It is stored in the select tag. It works just like the other one did, except it works immediately when the change is made. Like so - to view the source just find name="form_4". It takes you right to the script that contains the function. Below that is the actual form.
Notice that if you pick the current selection, nothing happens. That is because you didn't change anything! You just selected the same thing over again. You can also change the value of one of the options if you'd like - just do this:
window.document.form_name.list_name.options[whatever] = whatever. Put the index of the item you want to change in the brackets, of course. You'll also notice when you view source that I checked to see which option you chose in two different ways. The first way (which I used the first three times) just checks to see which index was chosen. The second way actually checks to see if the text in the selected object matches some text I entered. They both work fine, but the first way is safer, as it's easier to match numbers exactly than it is to match strings of text exactly.
onChange works with the multiple modifier too. It does the exact same thing in the exact same way as with the single option, but I'll give an example anyway. If you don't remember how, just hold shift or ctrl while selecting the items to select multiple items. To see source just find name="form_5".
Isn't that neato? Just one note. When you view source, the if(i == list.selectedIndex) statement is just for formatting purposes. The text would look weird without it.
That's it! This stuff may look complicated and very difficult, but it's actually very, very simple. The only reason it looks complicated is because of all those long-ass strings of code that you're dealing with. But once you get those down and understand that those long-ass strings of text are just representations of a single piece of information, you can see that it is, at it's core, simple, basic programming. But that isn't to say that you can't do some complex things with it. If this was too fast for you, head over to webmonkey.com. They give a much slower, much more mythodical tutorial on it.