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

标签 javascript html forms variables twitter-bootstrap

我正在尝试获取用户表单输入并将其显示回用户,等等(所有这些都需要将输入存储为 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 以显示我正在尝试的内容。

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

最佳答案

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

alert('you chose ' + theInput.value)

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

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

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

关于javascript - 分配 html 表单输入一个 JS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9957186/

相关文章:

javascript - 意外的 token - React babel

javascript - 在传单中旋转标记

javascript - 使用下划线随机选择并从集合中删除

javascript - 如何通过元素宽度替换 URL 参数

html - 随着屏幕分辨率的变化保持元素放置

javascript - 必填字段和多步骤表单出现问题

javascript - Jquery .click 仅在条件下触发

Javascript根据输入标签提交表单

html - <object> 标签如何影响表单提交

javascript - 如何将表单转换为数组键值