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

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!

Comments on this entry are closed.

  • fuad

    very usefull

  • joss

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

  • Alon

    Really great article, as usual.
    Thanks !

  • Irrfan

    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

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

  • Brandon Sky (Underaged)

    Too hard

  • Thomas

    Thank you…very informative link :)

  • Lance

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

  • Navneet

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

  • helpquery

    Script was helpful for me thank u…:)

  • anonymous

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

  • Rr9

    Very usefull stuff… Thanks soo much

  • daniel

    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

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

  • Phil Sanders

    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

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

  • lordoft

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

  • Ashish

    Hey this script was really useful. Thanks.

  • Pingback: JS101 Week 4 « The Bloggery of Jason Lydon()