Assigning html form input a JS variable

Question

I'm trying to take user form input and display it back to the user, among other things (all of which require the input being stored as a JS variable).

I'm trying to spit it out in an alert, as a quick feedback loop, and all I keep getting is [object HTMLInputElement]. I've tried to use document.forms[0] and document.getElementById (like below) and neither work. Also, I'm using bootstrap typeahead, could that be complicating this issue?

What am I missing?

Here's the code:

<div class="hero-unit">
    <h1> Title </h1>
    <p> This form description </p>  
    <form class="well" name="formInput" action= "#">
        <label>Input</label>
        <input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="[&quot;AAA&quot;,&quot;BBB&quot;,&quot;CCC&quot;,&quot;DDD&quot;,&quot;EEE&quot;,&quot;FFF&quot;,&quot;GGG&quot;,&quot;HHH&quot;,&quot;III&quot;,&quot;JJJ&quot;,&quot;KKK&quot;,&quot;LLL&quot;]"/>               
        </label>
        <div class="form-actions" "span3">
            <input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
            <script language="JavaScript" type="Text/JavaScript">
                var theInput = document.getElementById('txtvarInput');
            </script>
        </div>
    </form>
</div>

<div class="page-header">
    <h1>Input:
        <script language="JavaScript" type="Text/JavaScript">
            document.write(theInput.value);
        </script>
    </h1>

Edit: PART II, now the code works for the alert, but I need to use it elsewhere (like I said) and the variable isn't available in other sections of the html. Above, I'm just trying to get it to display that same value as a part of the html. It could be my JS, but this is pretty boilerplate stuff, so I think it's related to the location of the variable.

What do I need to do use it elsewhere? I've added the next div above to show what I'm trying.

--left an extra declaration of the variable in part II by accident, was one of the tests I was trying, removed now.

Answer 1

Right now, the object you're alert ing is an HTML element, not a string. You can get its value using the value property:

alert('you chose ' + theInput.value)

---

(Note that you probably didn't mean:

var theInput = document.getElementById('txtvarInput').value;

As other answers suggest, because that would give you an empty string. It's only read once.)

Answer 2

You are trying to output the entire HTML-object that you have selected, not the value-property of it. Since alert() expect a string, JavaScript gives you the string representation of that object which is [object HTMLInputElement] .

Try this instead:

var theInput = document.getElementById('txtvarInput').value;

Answer 3

在警报中，使用

theInput.value

Answer 4

您需要使用value属性：

  var theInput = document.getElementById('txtvarInput').value;

Answer 5

You forgot .value

Something like:

   document.getElementById('txtvarInput').value

Answer 6

var theInput = document.getElementById('txtvarInput');

应该

var theInput = document.getElementById('txtvarInput').value;

Answer 7

You are going to print the value of the input at the page load time. You will get an empty alert.

just do this!

    <input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
    <script language="JavaScript" type="Text/JavaScript">
function alertVal(){
        var theInput = document.getElementById('txtvarInput').value;
        alert('you chose ' + theInput);

}
    </script>