How to get an input text value in JavaScript

Question

How go get an input text value in JavaScript?

<script language="javascript" type="text/javascript">
    lol = document.getElementById('lolz').value;
    function kk(){
    alert(lol);
    }
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
</body>

When I put lol = document.getElementById('lolz').value; outside of the function kk(), like shown above, it doesn't work, but when I put it inside, it works. Can anyone tell me why?

Peter-Paul van Gemerden · Accepted Answer · 2016-02-09T10:32:34.917

The reason you function doesn't work when lol is defined outside it, is because the DOM isn't loaded yet when the JavaScript is first run. Because of that, getElementById will return null (see MDN).

You've already found the most obvious solution: by calling getElementById inside the function, the DOM will be loaded and ready by the time the function is called, and the element will be found like you expect it to.

There are a few other solutions. One is to wait until the entire document is loaded, like this:

<script type="text/javascript">
    var lolz;
    function onload() { 
        lolz = document.getElementById('lolz');
    }
    function kk(){
        alert(lolz.value);
    }
</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" onclick="kk();"/>
</body>

Note the onload attribute of the <body> tag. (On a side note: the language attribute of the <script> tag is deprecated. Don't use it.)

There is, however, a problem with onload: it waits until everything (including images, etc.) is loaded.

The other option is to wait until the DOM is ready (which is usually much earlier than onload). This can be done with "plain" JavaScript, but it's much easier to use a DOM library like jQuery.

For example:

<script type="text/javascript">
    $(document).ready(function() {
        var lolz = $('#lolz');
        var kk = $('#kk');
        kk.click(function() {
            alert(lolz.val());
        });
    });
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" id="kk" />
</body>

jQuery's .ready() takes a function as an argument. The function will be run as soon as the DOM is ready. This second example also uses .click() to bind kk's onclick handler, instead of doing that inline in the HTML.

The second problem with the first solution is that it reads the input's value not at the exact time the button has been clicked. You solved this quirk with jQuery's val() method in the second solution. — nalply, Aug 04 '12 at 18:46
Just a comment, but... why answer using jquery when asking a purely jscript question? jquery is great, but surely not absolutely needed by every single webpage. Maybe the user is to write javascript 100% "pure". Just take a look: http://youmightnotneedjquery.com/ — viridis, Sep 17 '16 at 10:02
Today's world is all about hybrid. Just to think - had there been no third party libraries around (and abound), Github would be a sorry state of affairs really. — carla, Nov 26 '22 at 08:38

nalply · Answer 2 · 2014-02-15T18:50:24.193

Do not use global variables in this way. Even if this could work, it's bad programming style. You can inadvertently overwrite important data in this way. Do this instead:

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

If you insist var lol to be set outside the function kk, then I propose this solution:

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
    <script type="text/javascript">
       var lol = document.getElementById('lolz');
       function kk() {
           alert(lol.value);
       }
    </script>
</body>

Note that the script element must follow the input element it refers to, because elements are only queryable with getElementById if they already have been parsed and created.

Both examples work, tested in jsfiddler.

Edit: I removed the language="javascript" attribute, because it's deprecated. See W3 HTML4 Specification, the SCRIPT element:

language = cdata [CI]

Deprecated. This attribute specifies the scripting language of the contents of this element. Its value is an identifier for the language, but since these identifiers are not standard, this attribute has been deprecated in favor of type.

and

A deprecated element or attribute is one that has been outdated by newer constructs. […] Deprecated elements may become obsolete in future versions of HTML. […] This specification includes examples that illustrate how to avoid using deprecated elements. […]

score 9 · Answer 3 · 2016-05-02T00:16:11.730

9

<script type="text/javascript">
function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}


</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" id="lolz" value=""/>
    <input type="button" value="click" onclick="kk();"/>
</body>

use this

edited May 02 '16 at 00:16

answered Sep 19 '13 at 18:40

Mauno Vähä · Answer 4 · 2012-08-04T18:48:56.340

Edit:

Move your javascript to end of the page to make sure DOM (html elements) is loaded before accessing them (javascript to end for fast loading).
Declare your variables always like in example using var textInputVal = document.getElementById('textInputId').value;
Use descriptive names for inputs and elements (makes easier to understand your own code and when someone other is looking it).
To see more about getElementById, see: http://www.tizag.com/javascriptT/javascript-getelementbyid.php
Using library such as jQuery makes using javascript hundred times easier, to learn more: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

see bfavarettos answer and my comment for complete explanation, he was faster! :) — Mauno Vähä, Aug 04 '12 at 18:23

bfavaretto · Answer 5 · 2012-08-04T18:24:35.140

7

Notice that this line:

lol = document.getElementById('lolz').value;

is before the actual <input> element on your markup:

<input type="text" name="enter" class="enter" value="" id="lolz"/>

Your code is parsed line by line, and the lol = ... line is evaluated before the browser knows about the existance of an input with id lolz. Thus, document.getElementById('lolz') will return null, and document.getElementById('lolz').value should cause an error.

Move that line inside the function, and it should work. This way, that line will only run when the function is called. And use var as others suggested, to avoid making it a global variable:

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

You can also move the script to the end of the page. Moving all script blocks to the end of your HTML <body> is the standard practice today to avoid this kind of reference problem. It also tends to speed up page load, since scripts that take long to load and parse are processed after the HTML has been (mostly) displayed.

edited Aug 04 '12 at 18:24

answered Aug 04 '12 at 18:19

bfavaretto

71,580
16
111
150

1

it is also to be noted that javascript should be placed bottom of the page for fast loading, not before of the html like shown within examples above. Then it also recognizes given html elements. – Mauno Vähä Aug 04 '12 at 18:21
1

VERY CLEAR EXPLANATION, THANKS! – Maria Aug 04 '12 at 18:22
1

Yes, that's one option. In terms of fast loading, it won't make much difference in this case. – bfavaretto Aug 04 '12 at 18:23
1

With this case or not I believe we should provide best practices :) – Mauno Vähä Aug 04 '12 at 18:24
1

@user1561559 There was a mistake I just fixed: the line as you posted wouldn't result in assigning `undefined` to `lol`, it would cause a js error. – bfavaretto Aug 04 '12 at 18:25
@MaunoV. You're right, I just added a paragraph about that at the end. – bfavaretto Aug 04 '12 at 18:28

score 4 · Answer 6 · answered Apr 10 '17 at 04:07

How to get an input text value in JavaScript

    var textbox;
    function onload() { 
        //Get value.
        textbox = document.getElementById('textbox');
    }

    function showMessage() { 
        //Show message in alert()
        alert("The message is: " + textbox.value);
    }

<body onload="onload();">
<div>
<input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>

Shreedhar · Answer 7 · 2012-08-04T18:23:21.767

3

as your lol is local variable now, its good practice to use var keyword for declaring any variables.

this may work for you :

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}

edited Aug 04 '12 at 18:23

answered Aug 04 '12 at 18:16

Shreedhar

5,502
3
22
27

htoniv · Answer 8 · 2021-03-25T16:28:32.557

3

All the above solutions are useful. And they used the line

lol = document.getElementById('lolz').value;

inside the function function kk().

What I suggest is, you may call that variable from another function fun_inside()

function fun_inside() {    
    lol = document.getElementById('lolz').value;
}
function kk() {
    fun_inside();
    alert(lol);
}

It can be useful when you built complex projects.

edited Mar 25 '21 at 16:28

answered Jun 05 '14 at 06:51

htoniv

1,658
21
40

score 3 · Answer 9 · answered Sep 10 '14 at 09:55

<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value) 
window.alert(subadd)  
}
</script>

<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>

score 3 · Answer 10 · edited Dec 18 '16 at 15:34

3

<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
    function har() {
        var txt_val;
        txt_val = document.getElementById("har").value;
        alert(txt_val);
    }
</script>

edited Dec 18 '16 at 15:34

Vladimir Vagaytsev

2,871
9
33
36

answered Dec 18 '16 at 14:31

score 1 · Answer 11 · answered May 01 '16 at 07:14

1

document.getElementById('id').value

answered May 01 '16 at 07:14

Selva Raj

11
1

score 0 · Answer 12 · answered Sep 05 '16 at 17:56

The reason that this doesn't work is because the variable doesn't change with the textbox. When it initially runs the code it gets the value of the textbox, but afterwards it isn't ever called again. However, when you define the variable in the function, every time that you call the function the variable updates. Then it alerts the variable which is now equal to the textbox's input.

score 0 · Answer 13 · answered Apr 13 '22 at 16:37

You can simply get values by using JavaScript (e) event object.

<body>
  <form onsubmit="handleSubmit()">
    <input type="text" name="name"/>
    <input type="email" name="email"/>
    <input type="password" name="password"/>
    <input type="submit" value="Submit"/>
  </form>
</body>

const handleSubmit = (e) =>
{
  e.preventDefault(); // prevent reload while click submit button
  const name = e.target.name.value;
  const email = e.target.email.value;
  const password = e.target.password.value;
  // do something
}

How to get an input text value in JavaScript

13 Answers13

Linked

Related