How to get the value of a form element using JavaScript

Please refer article: how to get JavaScript form object for information on getting a reference to the form object.

In this article we demonstrate the use of Javascript for accessing the values of form elements. Later, we will demonstrate all the concepts using a real world example.

Getting a text input element and it's value

To obtain a reference to a text input element, we can use a construct like this:

In the code above, "index" is the position of the element in the 0-based elements array, and oForm is the form object reference obtained using the document.forms collection:

To get the value of the text input element, we can use the value property of the text input object:

As an example, if we have the following text input element:

We can access the value of the element like this:

Getting a textarea element and it's value

The syntax for obtaining a reference to a textarea element is very similar:

To get the value entered by the user in the textarea field:

As an example, if we have a textarea element like this:

We can access the value entered by the user in this way:

Getting a hidden element and it's value

The syntax for obtaining a reference to a hidden input element:

To get the value of this element, we use the familiar code construct:

As an example, if we have a hidden input element in the form defined like this:

We can get the hidden input element's value like this:

Getting a select-one element and the selected option

As before, we can obtain a reference to this type of element using its name:

To get the index of the selected option in the javascript options array of the select element, we can use the selectedIndex property of the select element object:

We can now use this index to determine the value of the selected option:

If we needed to get the text corresponding to the selected option, we would need to use the text property of the option element, instead of the value property:

Let us say we need to find out the country selected by the user from a select-one list:

The Javascript code that can be used to get the user-selected country:

Getting a select-multiple element and all the selected options

If a select element has the additional attribute 'multiple', it allows users to select more than one option. Have a look at this HTML fragment:

We can write a Javascript function to get all the user-selected options:

To use this function, we must first obtain a reference to the select-multiple object:

We now pass this object reference to the getSelectedOptions function above. In this function, we iterate over all the options in the options array. Whenever an option is selected, the option object's selected property will be true. So, in the function we use this condition to get the indices of all the options selected, and then push the values of all these options onto the array sdValues which is returned by the function. We can use this generic function to capture the values of selected options for any select-multi element in a form.

Getting a radio element and it's checked value

Radio buttons in a form can be grouped together using the same name attribute, such that, if one of them is checked, all the others are automatically un-checked. Let us look at an example:

In order to retrieve the value of the checked radio button, we can write a simple javascript function:

The code is self-explanatory. We obtain a reference to the group of radio buttons using the name of the group, and then iterate over all the radio button objects to test which one of them is checked.

Getting a checkbox element, it's value and determining whether it is checked or not

A checkbox in a form has only two states (checked or un-checked) and is independent of the state of other checkboxes in the form, unlike radio buttons which can be grouped together under a common name. Let us look at the HTML code showing two checkboxes:

In order to access these checkboxes, their values, and their states, we can use the following javascript function:

We can then use this function in the following way:

Example

In order to demonstrate the concepts, let us look at an example form. Please fill out the form completely, so that we can discuss certain features.

Some observations:

1. The textarea field which requires you to provide information about acquiring work permit / visa gets disabled if you choose the option labeled 'No' for the field labeled 'Willing to work abroad ?', and gets enabled, if you then choose the option labeled 'Yes'. This is done before the form is submitted, and so we cannot use the radio button's values in the onClick event handler for the form's submit button to provide this functionality. Instead, we need to write an onClick event handler for each option. First have a look at the HTML:
   
   <label for="work_abroad">Willing to work abroad ? </label>
<input type="radio" name="work_abroad" value="y" onClick="enableElement(this.form.work_permit);">Yes
<input type="radio" name="work_abroad" value="n" onClick="disableElement(this.form.work_permit);">No

<label for="work_permit">Information about acquiring work permit / visa: </label><textarea name="work_permit" rows="3" cols="35"></textarea>

   
   Writing these functions is very simple:
   
   function disableElement(obj) {
obj.value = ' - N.A. - ';
obj.disabled = true;
}

function enableElement(obj) {
obj.value = '';
obj.disabled = false;
}


2. In the demo, you must have seen how skills are added one at a time to the skillset list, and there is also a provision for removing items added to the list. In order to implement this, we need to write a couple of Javascript functions:
   
   function addOption(oList, optionName, optionValue) {
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(optionName));
oOption.setAttribute("value", optionValue);

oList.appendChild(oOption);

}

function removeOption(oList, index) {
oList.remove(index);
}
   
   In Javascript we can create elements dynamically using the createElement method of the document object. So to create an option, we simply pass the argument "option" to this method, being that it is the name of the element we want to create (please don't confuse this with the name attribute of an element - which is different). To set the name of the option element that is displayed to the user, we use the method appendChild to create a child node. This is because in the DOM tree, the displayed text for an option element is a child of the option element. However, to set the value attribute, we can simply use the setAttribute method of the option element object, because the value attribute is not a child of the option element, but simply it's attribute. Finally, we append this newly created option element to the list as a child element itself.
   
   Removing an option from a list is very simple. If we know the index of the option in the list, we can simply use the remove method of the list object to remove the option in question.

The rest of the functionality is quite typical and has already been explained in this article, and you can download the code to learn more.

Related:

• Javascript Form Handling



• Form Design Software



• Set value of a form element using JavaScript



• Using getElementById to get the elements in a form