How to store a value from a form in a variable?

Question

I want to get a value from HTML to my Javascript.

So here's the HTML input section in the body

<input type="text" name="paa" value="0" size="3">

And here's the script part

var paa = document.getElementById("paa").value;

But I only get Null and when I parseInt it I only get NaN.

Surely I'm doing something wrong, but I have no idea what, I've searched for it but other topics seem to work just fine like this or use other stuff like jQuery..

All I want is to get a value from a HTML input to a Javascript variable.

If you want to extract value from an element by ID, you need to set the ID first. — lmenus, Jan 19 '16 at 11:56
Set `ID=paa` <`input type="text" id="paa" value="0" size="3">` — Jaydip Jadhav, Jan 19 '16 at 11:56
You're using `getElementById` but your element doesn't have an ID. — Chuck Le Butt, Jan 19 '16 at 11:57
Possible duplicate of [How to get an input text value in JavaScript](http://stackoverflow.com/questions/11810874/how-to-get-an-input-text-value-in-javascript) — Chuck Le Butt, Jan 19 '16 at 12:04
*I only get Null*. I assume you're referring to the value resulting from the call to `getElementById`. Read the documentation for that method at https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById, the first sentence of which says "Returns a reference to the element **by its ID**; the ID is a string which can be used to identify the element; it can be established **using the id attribute in HTML**". — , Jan 19 '16 at 12:24

score 8 · Answer 1 · answered Jan 19 '16 at 11:57

8

Change

<input type="text" name="paa" value="0" size="3">

to

<input type="text" name="paa" value="0" id="paa" size="3">

answered Jan 19 '16 at 11:57

Christophvh

12,586
7
48
70

1

Such a noob, thank you so much! I still wish it was just one language, but this will help a lot. – newtothis Jan 19 '16 at 12:44
1

easy mistake to make, no problem. Also if you are satisfied with the answer to your question make sure to approve it otherwise people will keep posting to this question. – Christophvh Jan 19 '16 at 12:50

James Donnelly · Accepted Answer · 2016-01-19T12:31:23.960

3

Your element has a name of "paa", not an id of "paa". Instead of getElementById() you'll need to use:

document.getElementsByName("paa")

This will return a collection of any elements with that name attribute. To access each individual one you'll need to use its index. If you only have one "paa" element on your page, you can use:

document.getElementsByName("paa")[0].value

edited Jan 19 '16 at 12:31

answered Jan 19 '16 at 11:57

James Donnelly

126,410
34
208
218

2

Wow, I think that's the quickest downvote I've ever received... @downvoter you can't have possibly read my answer, so care to explain why? – James Donnelly Jan 19 '16 at 11:58
1

Can think of two things. (1) In the majority of cases, people using `name` mean to do nothing more than identify an element, in which case the best advice would be to switch over to using `id`. (2) This question really falls into the category of a particular flavor of typo. It matches the criterion of *resolved in a manner unlikely to help future readers*. No one searching for an answer to a similar problem would possibly be able to find this. Nor has the OP learned anything that would help him solve anything other than this particular narrow problem in the future. – Jan 19 '16 at 12:30
That's an awesome idea! Thanks a lot. – newtothis Jan 19 '16 at 12:47
1

This is actually more what I wanted, it's working so much better now. Thanks again, I would never have known it was even possible to array the name tag. – newtothis Jan 19 '16 at 13:12

score 1 · Answer 3 · edited Jan 19 '16 at 12:00

1

So here's the HTML input section in the body

<input type="text" id="paa" value="0" size="3">

And here's the script part

<script>
    var paa = document.getElementById("paa").value;
    alert(paa)
</script>

edited Jan 19 '16 at 12:00

James Donnelly

126,410
34
208
218

answered Jan 19 '16 at 11:59

Shyam B Mohan

13
4

Except that by removing the `name` attribute you've potentially broken the submission of forms that this input element was a part of. – Jan 19 '16 at 12:37

score 1 · Answer 4 · answered Jan 19 '16 at 12:02

You simply need to add an ID to your input element, like so:

<input type="text" id="paa" name="paa" value="0" size="3">

This is because you're using getElementById, but your element doesn't have an ID.

Working example: https://jsfiddle.net/JohnnyWalkerDesign/gs9ek11L/

rochasdv · Answer 5 · 2016-01-19T12:37:27.593

0

You just forgot the ID attribute in your html

<input type="text" **id="paa"** name="paa" value="0" size="3">

Why not to use jQuery? Will make your life easier when working with HTML DOM.

var value = $('#paa').val();

edited Jan 19 '16 at 12:37

answered Jan 19 '16 at 12:31

rochasdv

539
2
8
21

What is easier about that? – Jan 19 '16 at 12:36
You don't need type "document.getElementById("elementId").value". Just use $('#elementId').val(); And this is not all about jquery, and I think you know that, torazburo :) – rochasdv Jan 19 '16 at 12:42

How to store a value from a form in a variable?

5 Answers5