You are here: Home » All Posts » Javascript Form Handling » How to get the value of a form element using JavaScript

How to get the value of a form element using JavaScript

in Javascript Form Handling

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

text input

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

multiline text box

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!
Reach out:

Prasanth Janardanan

Prasanth is the founder of Simfatic Solutions. He loves exploring Javascript possibilities and shares some great tips and some code here at
Most of the time, Prasanth is busy adding features to Simfatic Forms - a desktop based Web Form Builder.
Reach out:

Latest posts by Prasanth Janardanan (see all)

{ 17 comments… read them below or add one }

joss January 27, 2014 at 12:56 pm

muchas gracias.. esto es lo que buscaba hace rato address = oForm.elements["address"].value;


Alon May 17, 2012 at 1:57 pm

Really great article, as usual.
Thanks !


Irrfan May 9, 2012 at 4:04 pm

Hi, if you have more than one form do this –

for(var i=0; i < document.forms.length; i++)
if(document.forms[i].elements["component name"])
//do what you want here
document.forms[i].elements["component name"].style.visibility="hidden";


Iosif May 4, 2012 at 9:16 am

This was really useful to me right now! Thanks for sharing!


Brandon Sky (Underaged) March 6, 2012 at 8:39 pm

Too hard


Thomas October 7, 2011 at 10:18 am

Thank you…very informative link :)


Lance September 30, 2011 at 6:07 am

I was wondering how to make text from a drop down menu when selected go into another textbox by clicking on a button.


Navneet September 24, 2011 at 12:59 pm

how to accept multiple text field values and put them into an array in simple javascript???


helpquery September 8, 2011 at 7:25 am

Script was helpful for me thank u…:)


anonymous August 11, 2011 at 11:39 am

But how to refer and form element which is array of element ?


Rr9 July 21, 2011 at 6:31 pm

Very usefull stuff… Thanks soo much


daniel May 13, 2011 at 5:35 pm

great post…is there a way to get the text area to recognize multiple lines? for instance, pull from the form to create the body of an email and allow a multi-line text area for the message contents…thanks so much


Ravikumar May 12, 2011 at 8:24 am

Hai This Script was very helpful for me,so thanks for this website and this programmer ,once again thank u…


Phil Sanders May 4, 2011 at 9:25 pm

This works great for Firefox and Chrome but I cant not for the life of me get this to work on IE (6 or 7)…. What is the deal?


prasanth May 5, 2011 at 2:46 pm

It should work fine in IE as well. what exactly is not working? Can you show the code?


lordoft April 16, 2011 at 10:35 am

hey this really helped me. Thank you!
Here’s a smiley for you in return -> :)


Ashish April 14, 2011 at 5:26 am

Hey this script was really useful. Thanks.


Leave a Comment

{ 1 trackback }

Previous post:

Next post: