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

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

• javascript
• html

Share Improve this question Follow asked Sep 2, 2015 at 13:21 ethanzhethanzh 14322 gold badges55 silver badges2020 bronze badges 1

• Possible duplicate of JavaScript get input text value – TheAlexLichter Commented Sep 2, 2015 at 13:23

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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>

Check this !

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

OR

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

See http://www.w3schools./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>

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;
  }
});

use the value property

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