Get and Set values for all form elements using JavaScript

Here, we will cover the basic logic to retrieve and set values for various HTML form elements using a sample JavaScript code.

This discussion assumes that you are familiar with the methods like document.getElementById, document.getElementsByName etc.. to find and load the element for further processing. For a quick note, if it is assumed that you have a textbox with id, ‘myText’, then that text can be accessed by document.getElementsById(‘myText’).

The logic is pretty simple and is based on the concept that each element has it’s own individual property to be set. Below is the table that shows just that.

Element Type	Property to be used	Comments
checkbox	checked
hidden	value
radio	checked
text	value
textarea	value
select-one	selected OR selectedIndex	This is a dropdown. It can be either set by setting the ‘selected’ property of the options collection OR setting the selectedIndex property of the dropdown itself.
select-multiple	selected OR selectedIndex	This is multi-select dropdown which is created using multiple="multiple" for a select tag. Works similar to select-one.

To get the value of a particular element, use it’s appropriate property based on the type of the element being processed. The below code shows how that can be done in a simple manner. Note that the select-multiple returns an array of selected values. This code is presented in simple if..else syntax for simplicity. Provide error catching mechanism as necessary.

function getValue(element)//returns the value
{
	if (element==null) return null;
	var returnValue;	
	if (element.type=="select-one") 
	{   
		//dropdown (select-one)
		returnValue = element.options[element.selectedIndex].value;		
	}
	else if (element.type=="select-multiple") 
	{
		//multi-select drop down
		var returnArray = new Array();
		for(var i = 0; i < element.options.length; i++) 
		{
			if(element.options[i].selected == true) 
			{
				returnArray.push(element.options[i].value);
			}
		}
		return returnArray;
	}
	else if (element.type=="checkbox")
	{
		//checkbox element
		returnValue = Boolean(element.checked);
	}
	else if (element.type=="radio")
	{
		//radio element
		returnValue = Boolean(element.checked);
	}
	else
	{
		//text, textarea, hidden
		returnValue = element.value;
	}
	return returnValue;
}

To set the value, it’s just the reverse process, which is shown below.

function setValue(element, value)//return whether the set was successful.
{ 
	if (element==null) return false;
	if (value==null) return false;
	var returnValue;	
	if (element.type=="select-one") 
	{   
		//dropdown (select-one)
		for(var i = 0; i < element.options.length; i++) 
		{
			if(element.options[i].value == value) 
			{
				element.selectedIndex = i;
				returnValue = true;
				break;
			}
		}		
	}
	else if (element.type=="select-multiple") 
	{
		//multi-select drop down, expects the value to be an array of selected values
		for(var j = 0; j < value.length; j++)
		{
			for(var i = 0; i < element.options.length; i++) 
			{
				if(element.options[i].value == value[j]) 
				{
					element.options[i].selected = true;					
					break;
				}
			}				
		}
		returnValue = true;
	}
	else if (element.type=="checkbox")
	{
		//checkbox element
		element.checked = Boolean(value);
		returnValue = true;
	}
	else if (element.type=="radio")
	{
		//radio element
		element.checked = Boolean(value);
		returnValue = true;
	}
	else
	{
		//text, textarea, hidden
		element.value = value;
		returnValue = true;
	}
	return returnValue;
}

Additional thoughts:
If, the controls are rendered from an ASP.net application, there may be times where the value from a Label control is to be set or retrieved. Since a Label is rendered as a SPAN element, this can be done by enhancing the code for checking the nodeName OR tagName (or any appropriate property) and using innerHTML to set or get the value of the SPAN element.

Technorati Tags: Javascript,Element,retrieve,set value,ALL