| home / programming / professional / chap6/ 1 |    [previous] [next] |
|
|
|
The value attribute contains the value shown within a text field. You can read it out or write to it. For instance:
document.forms['firstform'].elements['input1'].value = 'Default user';
sets the text 'Default user' in the form field.
For security reasons web professionals are not allowed to set the value of a file upload field – only the user can do that. Thus malicious site owners cannot set the value to the user's password file and then upload it to their own server.
When validating checkboxes and radiobuttons, you usually want to see if they're checked or not. This information is contained in the Boolean value of the checked property. For example, take this form:
<form name="firstform">
<input type="checkbox" name="checkbox1" />Checkbox
<input type="radio" name="radioarray" value="first"
/>First radio
<input type="radio" name="radioarray" value="second"
/>Second radio
<input type="radio" name="radioarray" value="third"
/>Third radio
</form>
If you want to know if the checkbox is checked, simply do:
if (document.forms['firstform'].elements['checkbox'].checked)
{
// checkbox is checked; do something with this information
}
Note that the value of a checkbox without a value attribute is always 'on'.
Radiobuttons are more complicated than checkboxes. Usually there are several radiobuttons which share one name . Only one of these radiobuttons can be checked at any time. If you use this DOM reference:
document.forms['firstform'].elements['radioarray']
then you access an array of all radiobuttons that share the name "radioarray". In fact:
document.forms['firstform'].elements['radioarray'][0]
accesses the first radiobutton. To find out the value of the checked radiobutton, we use the following script to loop through all available radiobuttons and see if they have been checked:
var thevalue = '';
var x = document.forms['firstform'].elements['radioarray'];
for (var i=0; i<x.length; i++)
{
if (x[i].checked)
{
thevalue = x[i].value;
break;
}
}
if (!thevalue)
{
// No radiobutton is checked
// Do something with this information
}
else
{
// thevalue contains the value of the checked radiobutton
// Do something with this information
}
You'll rarely need to access buttons. The submit and reset elements have their own tasks, and the button element usually has an onclick event handler to make sure something happens when the user clicks the button.
However, sometimes you may want to change the text of the button.
<input type="button" name="example_button" value="Click me!" />
Changing the value property of the button gives it new text:
document.forms['firstform'].elements['example_button'].value = 'Don\'t click me!';
Select boxes have drifted considerably from their original purpose. Nowadays select boxes are more important as navigation tools than as simple form fields. The onchange event handler allows you to monitor user actions quite precisely, so that you can immediately react when the user selects an option. The most common effect is to send the user to the selected page.
<form name="firstform" onchange="doSomething()">
<select name="testselect">
<option value="first">First option</option>
<option value="second">Second option</option>
<option value="third">Third option</option>
</select>
</form>
Both for navigation purposes and for form validation, you usually want to know which option the user has selected.
Every select box object has an options[] array object as a property, which contains all the options. Note that these options are only accessible by index numbers, not by names, since options don't have names. To get the value of the first option, use:
document.forms['firstform'].elements['testselect'].options[0].value
However, we only want to know the value of the option that the user has selected. The selectedIndex property of the select box contains index number of the selected option. (In the case of a multiple selection within a select box, it gives the index of the first selected option.) We can read out the value of this option using the syntax:
var x = document.forms['firstform'].elements['testselect'];
var thevalue = x.options[x.selectedIndex].value;
Now thevalue contains the value of the option that is selected by the user.
In Version 5 and higher browsers the value of the selected
option is copied to the value of the select box itself, so that
document.forms['firstform'].elements['testselect'].value
gives the desired information. In older browsers, however, the select
box itself has no value.
| home / programming / professional / chap6/ 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 11, 2003
URL: http://webreference.com/programming/professional/chap6/1
