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.

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)




HTML Forms
	HTML Form Tutorial
	The Form Tag
	The Form Submit Button
	Form design software
	How to make a web form
	Make web forms quickly, without coding

Javascript Form Handling
Basics
	Using getElementById to get the elements in a form
	Set value of form element using JavaScript
	Get value of form element using JavaScript
	Handling multiple forms using JavaScript
	JavaScript reset/clear a form
Advanced
	JavaScript Form Validation
	Submitting a form using JavaScript
	Can JavaScript Email a Form?
	Switching the form action field dynamically
	JavaScript Button

JavaScript Popup Windows
	The window.open method
	The window.close method
	More ...



. Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.

How to set the value of a form field using Javascript (page 3)

Selecting options of a select element through javascript

Selecting multiple options of a select element through javascript

Checking radio elements and checkboxes through javascript

Previous Pages