Of course, the most important thing is to find out what the user has filled in or checked in the form. At other times you might want to fill in something in the form.
Below are snippets of scripts that help you access form elements. All of them are meant to
send the user input to the variable user_input. After you’ve done that, you can check this value for whatever you want.
- Texts, textareas and hidden fields
- Select boxes
- Checkboxes
- Radio buttons
If you’d like to study a practical example, see the example form and script.
Texts, textareas and hidden fields
Very simple:
user_input = document.forms[0].text.value
where text is the name of the text field, textarea or hidden field. The value of this element gives the text, so we transfer it to user_input.
Writing is also possible:
document.forms[0].text.value = ‘The new value’;
Select boxes
Select boxes are simple too:
user_input = document.forms[0].select.value;
To change the selected option in a select box, you have to change its selectedIndex, like
document.forms[0].select.selectedIndex = 2;
Now the third option in the box is selected.
Old browsers
In old browsers, select boxes didn’t yet have a value property. Back then, this was the way to find the value of a select box:
var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value
First, we need to find out which option the user has selected. document.forms[0].select.selectedIndex gives us the number of the selected option. JavaScript has created an array options which contains all options of the select box. So we ask for the selected option in this array and take the value of it, which we transfer to user_input.
Checkboxes
Checkboxes need a slightly different approach. We already know their values, but want to know whether the user has checked them. The checked property tells us. It can have two values: true or false.
Now we do:
if (document.forms[0].checkbox.checked)
{
user_input = document.forms[0].checkbox.name
}
in which checkbox is the name of the checkbox. If the checkbox is checked, we take its name
(or its value, if you need that bit of data) and transfer it to user_input.
To check a checkbox, set its property checked to true:
document.forms[0].checkbox.checked = true;
Radio buttons
Unfortunately it’s not possible to see at once which radio button in a group the user
has checked. You need to go through all radio’s and see which one’s checked
property is true.
for (i=0;i<document.forms[0].radios.length;i++)
{
if (document.forms[0].radios[i].checked)
{ user_input = document.forms[0].radios[i].value;
}
}
where radios is the name of the group of radio buttons.
Note that document.forms[0].radios is an array filled with all radio buttons. Loop through all of them and see if it is checked. If one is, transfer the value of that radio button to user_input.
document.forms[0].radios.length gives the number of radio buttons. For each radio
button, we see if it is. To check a radio button, set its property checked to true:
document.forms[0].radios[i].checked = true;
