如何通过 JS 获取表单中输入的内容？答案

【问题标题】：How can I get the content of an input in my form through JS?如何通过 JS 获取表单中输入的内容？
【发布时间】：2016-04-06 19:31:01
【问题描述】：

我有一个代码位，用于制作表格。有一个数字输入，我想知道如何获取该输入并将其存储在一个变量中以供 JS 计算。如何在提交时获取输入中的当前值并将其设为变量？

$(Document).ready(function() {
  $("input[type='submit']").click(function() {

  });
});

body {
  background-color: skyblue;
}

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' href='style.css' />
  <script src='script.js'></script>
  <meta charset="UTF-8">
  <title>Classified</title>
</head>

<body>
  <h1>Classified</h1>
  <form action="script.js" name="classified" method="get">
    <input type="number" name="classified" min="0">
    <input type="submit" value="submit">
  </form>
  <h3 hidden>Classified</h3>
  <h3 hidden>Classified</h3>
</body>

</html>

【问题讨论】：

为什么不用AngularJS之类的框架呢？
呃，您的文档是“文档”。我相信它是区分大小写的“文件”。
@IgnacioVillaverde 因此，根据 OP 想要在这里实现的目标，您建议他使用整个框架？
@Taplar Snippet syntax highliter 可以识别，所以我觉得没问题。
@IgnacioVillaverde 你有一个有效的观点，但这样的建议来自这个？框架也不是所有事情的答案——只是一种结构化的方式来做你最可能想做的事情。如果他的应用程序不是很大，它可能会导致更多的开销:)

标签： javascript jquery html forms variables

【解决方案1】：

如果允许您更改表单的标记，我建议给它一个 ID，例如

<form action="script.js" name="classified" method="get">
    <input id="my-id" type="number" name="classified" min="0">
    <input type="submit" value="submit">
</form>

然后在你的 JS 中

$(document).ready(function() {
    $("input[type='submit']").click(function() {
        var myNumVal = $('#my-id').val();
    });
});

jQueries .val() 方法返回表单元素的 value 属性。此外，正如您帖子下方的 cmets 所述 - 我也相信 Document 区分大小写并且应该是 document 以至少确保您的代码实际运行是安全的。

【讨论】：

【解决方案2】：

$(function() {
    //user could hit enter in the input field, bind on submit instead
    $("form[name='classified']").on('submit', function() {
        var $classified = $('input[name="classified"]');
        console.log($classified.val());
    });
});

【讨论】：

【解决方案3】：

试试这个：

var inputField = $("input[type='number']");

【讨论】：