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!

{ 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;

Reply

Alon May 17, 2012 at 1:57 pm

Really great article, as usual.
Thanks !

Reply

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";
}
}

Reply

Iosif May 4, 2012 at 9:16 am

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

Reply

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

Too hard

Reply

Thomas October 7, 2011 at 10:18 am

Thank you…very informative link :)

Reply

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.

Reply

Navneet September 24, 2011 at 12:59 pm

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

Reply

helpquery September 8, 2011 at 7:25 am

Script was helpful for me thank u…:)

Reply

anonymous August 11, 2011 at 11:39 am

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

Reply

Rr9 July 21, 2011 at 6:31 pm

Very usefull stuff… Thanks soo much

Reply

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

Reply

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…

Reply

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?

Reply

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?

Reply

lordoft April 16, 2011 at 10:35 am

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

Reply

Ashish April 14, 2011 at 5:26 am

Hey this script was really useful. Thanks.

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: