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


Comments on this entry are closed.

  • hi how to hack facebook with javscript pliz tell me

  • If I have a multiple selection element in a form, how do I get the values of it. The DOM element “Values” field shall have only one value clicked.

  • very usefull
    !!!!!!!!!

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

  • Really great article, as usual.
    Thanks !

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

    • i want code ?

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

  • Too hard

  • Thank you…very informative link 🙂

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

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

  • Script was helpful for me thank u…:)

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

  • Very usefull stuff… Thanks soo much

  • 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

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

  • 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?

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

      • validation form only

      • can you please give me complete code for given page. validation form

      • Login Form

        Login information

        username:

        password:

    • can u please help me ?

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

  • Hey this script was really useful. Thanks.