javascript - 分配 html 表单输入一个 JS 变量

Question

我正在尝试获取用户表单输入并将其显示回用户，等等(所有这些都需要将输入存储为 JS 变量)。

我试图在警报中吐出它，作为一个快速反馈循环，而我一直得到的只是 [object HTMLInputElement]。我试过使用 document.forms[0] 和 document.getElementById(如下所示)但都不起作用。另外，我正在使用 bootstrap typeahead，这会使这个问题复杂化吗？

我错过了什么？

代码如下:

<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>

编辑:第二部分，现在代码适用于警报，但我需要在其他地方使用它(就像我说的)并且该变量在 html 的其他部分不可用。上面，我只是想让它显示与 html 的一部分相同的值。它可能是我的 JS，但这是相当样板的东西，所以我认为它与变量的位置有关。

我需要做什么才能在其他地方使用它？我在上面添加了下一个 div 以显示我正在尝试的内容。

--不小心在第二部分留下了额外的变量声明，这是我正在尝试的测试之一，现在已删除。

Answer 1

现在，您要提醒的对象是一个 HTML 元素，而不是字符串。您可以使用 value 属性获取它的值:

alert('you chose ' + theInput.value)

---

(请注意，您可能没有的意思是:

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

正如其他答案所暗示的那样，因为那会给你一个空字符串。它只读了一次。)