如何从javascript表单获取用户输入？ [复制]答案

【问题标题】：How to get user input from javascript form? [duplicate]如何从javascript表单获取用户输入？ [复制]
【发布时间】：2018-06-12 18:00:42
【问题描述】：

所以我的问题很简单。

如何从表单中获取用户输入并将其放入变量中？

我正在努力完成这个简单的任务，希望能得到一些帮助。

这是我的代码：

html:

<body>
        <form>
            <input type="text" id="input_id" value="">
            <input type="submit" value="Submit">
            <div id="alert" style="color: red"></div>
        </form>
    </body>

Javascript

    var a = document.getElementById('input_id').value;

function wawa() {
    return a;
}
document.getElementById('alert').innerHTML = "user entered this value: " + " " + a;

我想用 vanilla JS 做这个，没有库。

谢谢。

【问题讨论】：

可能建议看一个像这样的基本 JS 教程：youtube.com/watch?v=IzkAi2QMp7Y

标签： javascript html

【解决方案1】：

您不需要函数之外的变量。您只需要button 和onclick event。 onclick event 调用一个检查输入并写入<div> 的函数。

function wawa() {
  var variable = document.getElementById('input_id').value;
  document.getElementById('alert').innerHTML = 'The user input is: ' + variable;
}

<body>
  <form>
    <input type="text" id="input_id" value="">
    <input type="button" value="Submit" onclick="wawa()" />
    <div id="alert" style="color: red"></div>
  </form>
</body>

【讨论】：

【解决方案2】：

就像这样：

var a = document.getElementById('input_id');
a.addEventListener('keyup',function() {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

<form>
  <input type="text" id="input_id" value="">
  <input type="submit" value="Submit">
  <div id="alert" style="color: red"></div>
</form>

【讨论】：

【解决方案3】：

如果它适合你，你可以试试这个脚本吗：

var a = document.getElementById('input_id');
a.addEventListener('keyup', function(event) {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

【讨论】：

【解决方案4】：

您可以使用简单的按钮通过onclick 调用 JavaScript 函数。

您缺少的主键是绑定到您的按钮的JavaScript event。

方法如下：

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
  console.log(a);
}

<body>
  <form>
    <input type="text" id="input_id" value="">
    <div id="alert" style="color: red"></div>
    <button onclick="getData();">Get Data</button>
  </form>
</body>

如果您的表单不需要提交，则不需要 from，只需使用 oninput 事件即可获得响应更快的输出：

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

<body>
  <input type="text" id="input_id" value="" oninput="getData();">
  <div id="alert" style="color: red"></div>
</body>

如果您想要一些关于事件的小教程，这是一个很好的起点MDN Building Blocks Events。

如果你需要提交数据，你也可以试试onsubmit：

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

function submittedData() {
  var a = document.getElementById("input_id").value;
  console.log(a);
}

<body>
  <form onsubmit="submittedData();">
    <input type="text" id="input_id" value="" oninput="getData();">
    <div id="alert" style="color: red"></div>
    <input type="submit" value="Submit" />
  </form>
</body>

【讨论】：

非常广泛的答案 fjoe。谢谢，但是是的，我的表格需要提交。数据类型需要通过浏览器检查，然后发送到服务器进行处理。
@coco 我添加了一些内容链接，这些链接应该有助于提高答案的质量，让您有更多的思考和工作:)
@coco 我为 onsubmit 添加了一个示例，它将与您的 from 一起完成您需要的工作。