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.

Text input element

To obtain a reference to a text input element, here is some sample code:

oText = oForm.elements["text_element_name"]; OR
oText = oForm.elements[index];

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:

oForm = document.forms[index];

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

text_val = oText.value; 

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

<input type="text" name="name" id="txt_name" size="30" maxlength="70"> 

We can access the value of the element like this:

name = oForm.elements["name"].value; 

Textarea element

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

oTextarea = oForm.elements["textarea_element_name"];

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

textarea_val = oTextarea.value; 

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

<textarea name="address" id="txta_address" rows="3" cols="35"></textarea>

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

address = oForm.elements["address"].value;

Hidden element

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

oHidden = oForm.elements["hidden_element_name"];

To get the value of this element:

hidden_val = oHidden.value;

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

<input type="hidden" name="number_of_skillsets" value="1">

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

number_of_skillsets = oForm.elements["number_of_skillsets"].value;

Next: How to get the value of a form element : Drop downs and lists

Be Sociable, Share!

• 

Related posts:

1. How to set the value of a form element using Javascript
2. How to get the value of a form element : Drop downs and lists
3. Using JavaScript to reset or clear a form
4. Using JavaScript to access form objects when there are multiple forms
5. How to get the value of a form element : check box and radio button
6. How to set the value of a form field using Javascript PII
7. How to use getElementById to get the elements in a form
8. How to set the value of a form field using Javascript PIII
9. How to Submit a Form Using JavaScript
10. JavaScript Form Validation : quick and easy!
11. JavaScript Form Validation Script: More features
12. Doing real-time calculations in a form using JavaScript
13. Can JavaScript email a form?
14. HTML Form Tutorial Part II : More Input Elements
15. From an HTML Form to an Email Inbox

Tagged as: beginner, javascript get form, reference