How to set the value of a form field using Javascript (page 3)
This is in continuationof the previous article:
How to set the value of a form field using Javascript
Selecting options of a select element through javascript
In Javascript, since each <option>
tag inside a <select> tag, is placed in the
options array of the select object, we can access
each select option using a construct such as:
selectObject.options[index]
where, "index" refers to the position of the option in the array.
Also, each option object has a "selected" attribute that can be set
to boolean true or false. For instance, the code snippet below
selects the option with index "i" in the options array.
selectObject.options[i].selected = true;
We can also use the select object's selectedIndex property to achieve
the same result:
selectObject.selectedIndex = i;
To find out the number of options, we simply use the length attribute
of the select object:
selectObject.length
Finally, to find out the value of the option (not the text
displayed for the user), we can use the value attribute for
the option:
selectObject.options[i].value
Let us look at an example implementation
to demonstrate the use of Javascript to select options in a form.
The HTML for the form in the example is very simple:
<form name="check_letter_frm" action="#">
Enter a letter: </label><input type="text" name="check_letter" size="1">
<input type="button" name="matching_word" value="Select matching Word"
onclick="set_matching_word(this.form.letters, this.form.check_letter);">
Matching Word: <select name="letters">
<option></option>
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">carrot</option>
<option value="d">daisy</option>
<option value="e">elephant</option>
<option value="f">fox</option>
...
<option value="z">zoo</option>
</select>
</form>
To provide for the word finder functionality, we need to code a Javascript function:
function set_matching_word(selectObj, txtObj) {
var letter = txtObj.value;
for(var i = 0; i < selectObj.length; i++) {
if(selectObj.options[i].value == letter)
selectObj.selectedIndex = i;
}
}
The code is self explanatory. To iterate over all the options, we find
out the number of options using the length attribute of the select object. We then
check if the value of each option is the same as the letter provided by the user.
If it is, this option is selected. The code for this example can be downloaded from
here.
Selecting multiple options of a select element through javascript
To provide for the functionality of selecting multiple select options through
Javascript, we first need to add a "multiple" attribute to the
<select> tag in the earlier example we saw:
<select name="letters" multiple='multiple' size="5">
The "size" attribute refers to the number of options that are visible at a time
for the select field.
Have a look at a demo to get an idea of what
we want to implement.
In this form, since every letter can have multiple matching words, unlike in
the previous example, we cannot use the letter to uniquely determine the corresponding
words. So, we simply use the word itself as the value of the option element,
for each option, and use javascript's charAt() function to determine the
value of the first character. But first, let us have a look at the changes in the HTML
of the new form:
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
The Javascript function that we need to implement is very similar to the one we saw
for selecting a single option:
function set_matching_words(selectObj, txtObj) {
var letter = txtObj.value;
for(var i = 0; i < selectObj.length; i++) {
if(selectObj.options[i].value.charAt(0) == letter) {
selectObj.options[i].selected = true;
} else {
selectObj.options[i].selected = false;
}
}
}
In the code above, charAt(0) gives us the first character of each option's
value, which we then match with the letter entered by the user. Whenever
a match is found, we set the option object's selected property to true.
The rest of the code above is self-explanatory. Download the code from
here to learn more.
Checking radio elements and checkboxes through javascript
In an HTML form, radio elements can be grouped together, and all radio elements
in a single group must have the same value for the "name" attribute. This allows them
to be accessed as a single group. Each such radio element has a corresponding radio
object which is placed in an array that we can iterate over programmatically.
In order to check a radio element, we use the following syntax:
formObject.radio_element_group_name[index].checked==true
The "radio_element_group_name" is the common name for all the radio elements, and
is also the name of the Javascript array holding references to each radio element.
Using an "index", we can obtain a reference to an individual radio element
in this array. We can then set the "checked" property of this radio element
object to boolean true or false, according to whether we need that
radio element to be checked or not.
The approach for "checking" and "unchecking" HTML checkboxes is very similar.
Let us look at an example to demontrate the
concepts presented so far.
In this example, in order to "check" the checkbox element labeled "Backups Needed",
we use the following code:
targetFormObj.backups_needed.checked = true;
where, targetFormObj is the object reference to the first form in the
webpage and backups_needed is the name of the checkbox we want to check
through Javascript.
As mentioned before, we set the "checked" property of the checkbox object to
the boolean value true. The code for the rest of the functionality is also very
similar, and if you are interested, you can
download the code
and have a look.
Previous Pages
- Page 1 : How to set the value of a form element using Javascript(textarea & textbox)
- Page 2 : How to set the value of a form field using Javascript(hidden field)
|
