分配html表单输入一个JS变量答案

【问题标题】：Assigning html form input a JS variable分配html表单输入一个JS变量
【发布时间】：2012-03-31 15:27:41
【问题描述】：

我正在尝试获取用户表单输入并将其显示给用户，除其他外（所有这些都需要将输入存储为 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>

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

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

--意外地在第二部分留下了一个额外的变量声明，是我正在尝试的测试之一，现在被删除了。

【问题讨论】：

标签： javascript html forms variables twitter-bootstrap

【解决方案1】：

现在，alerting 的对象是一个 HTML 元素，而不是字符串。您可以使用value 属性获取其值：

alert('you chose ' + theInput.value)

（请注意，您可能没有的意思是：

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

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

【讨论】：

谢谢伙计，工作就像一个魅力。其他人都是对的，我错过了“.value”只是让我把它放在了错误的地方。
现在，我在 html 的其他部分使用该变量时遇到了问题。我需要做些什么不同的事情才能让变量在其他地方（在其他
中）使用？
@ssikes：它是全球性的，你应该可以在任何地方使用它。请出示您的代码好吗？
@ssikes：之后您需要动态添加元素。查看如何使用 JavaScript 进行 DOM 操作，或提出其他问题。
到目前为止运气不好，如果您知道一个好的（相关）资源可以指点我，我将不胜感激。

【解决方案2】：

您正在尝试输出您选择的整个 HTML 对象，而不是它的值属性。由于alert() 需要一个字符串，JavaScript 为您提供了该对象的字符串表示形式，即[object HTMLInputElement]。

试试这个：

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

【讨论】：

【解决方案3】：

在警报中，使用

theInput.value

【讨论】：

【解决方案4】：

您需要使用value 属性：

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

【讨论】：

之前尝试过，它返回一个空白，知道为什么会这样吗？
因为值为空''？即你的文本框中什么都没有？

【解决方案5】：

你忘记了.value

类似：

   document.getElementById('txtvarInput').value

【讨论】：

【解决方案6】：

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

应该是

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

【讨论】：

【解决方案7】：

您将在页面加载时打印输入的值。您将收到一个空警报。

就这样吧！

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

【讨论】：