How to get value from HTML textbox in Javascript

Question

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:

<div id="firstq"> 
<form id="firstbox">
    Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>

and the Javascript I'm trying to use looks like this:

var topMenuChoice = document.getElementById("firstinput");
    document.write(topMenuChoice);
}

However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?

Thanks

Possible duplicate of [JavaScript get input text value](http://stackoverflow.com/questions/11563638/javascript-get-input-text-value) — manniL, Sep 02 '15 at 13:23

maioman · Answer 1 · 2015-09-02T13:53:05.047

1

here's an example with change event listener for firing a function when there's a change in form

var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/


var divInner = div.innerHTML;
setTimeout(function(){
 document.write(divInner);
},2000)

})

<form id="firstbox">Choice:
  <input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>

edited Sep 02 '15 at 13:53

answered Sep 02 '15 at 13:26

maioman

18,154
4
36
42

No, I want to print the text directly to the page, not to the console. – ethanzh Sep 02 '15 at 13:29
This seems to be in the right direction, now, how do I go about assigning the value to a variable? To be used in math problems – ethanzh Sep 02 '15 at 13:35
@ethanzh it depends where you want to show the input value; in my updated example I'm setting innerHTML property on another div but there are many ways you could display it ; using document.write will rewrite your markup (deleting what was there before) – maioman Sep 02 '15 at 13:52
as for your other question , I suggest you look into JS data types ; – maioman Sep 02 '15 at 13:55

score 0 · Answer 2 · answered Sep 02 '15 at 13:32

0

Check this !

document.write(document.forms['firstbox'].firstinput.value);

OR

var topMenuChoice = document.getElementById("firstinput");
    document.write(topMenuChoice.value);
}

answered Sep 02 '15 at 13:32

Mouloud

3,715
1
26
20

score 0 · Answer 3 · answered Sep 02 '15 at 13:38

See http://www.w3schools.com/jsref/prop_text_value.asp

var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);

<div id="firstq"> 
<form id="firstbox">
    Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>

ianaya89 · Answer 4 · 2015-09-02T13:50:38.303

0

If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):

HTML

<div id="firstq"> 
  <form id="firstbox">
    Choice: <input id="firstinput" type="text" name="choice">
  </form>
  <div id="result"></div>
</div>

JS

var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;

You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.

JS

document.getElementById('firstinput').addEventListener('keypress', function(e) {
  if(e.which == 13) { //detect enter key pressed
    e.preventDefault();
    document.getElementById('result').innerHTML = this.value;
  }
});

edited Sep 02 '15 at 13:50

answered Sep 02 '15 at 13:40

ianaya89

4,153
3
26
34

If I want the usage of the event to be hitting the 'enter' key, how would I go about doing that? Also, the code you posted isn't working the way I thought it would. – ethanzh Sep 02 '15 at 13:44
I have copy and pasted the code from the codepen exactly onto my source code, but I'm not getting the same behavior from it. Weird. – ethanzh Sep 02 '15 at 14:06
Could you poste your code on a code pen to review it? – ianaya89 Sep 02 '15 at 14:10
I couldn't get code pen to work, I hope this is sufficient: http://pastebin.com/7cBiZZP0 – ethanzh Sep 02 '15 at 14:13
You are missing a '}' at line 48 – ianaya89 Sep 02 '15 at 14:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88589/discussion-between-ianaya89-and-ethanzh). – ianaya89 Sep 02 '15 at 14:38

score -1 · Answer 5 · edited Sep 02 '15 at 14:01

-1

use the value property

var topMenuChoice = document.getElementById("firstinput");
    document.write(topMenuChoice).value;
}

edited Sep 02 '15 at 14:01

dsh

12,037
3
33
51

answered Sep 02 '15 at 13:22

MoLow

3,056
2
21
41

The "[object HTMLInputElement]" is gone, but now when I type something in and hit enter, all that happens is the text disappears, it isn't printed onto the page like it's supposed to. – ethanzh Sep 02 '15 at 13:26

How to get value from HTML textbox in Javascript

5 Answers5