javascript - 提交时将表单数据发送到 Javascript

Question

好吧，我觉得这应该很简单；所以要么我完全错过了这里和我读过的其他网站上的问题的要点，要么没有在相同的上下文中被问到......

我有一个非常简单的表单元素(如下)

<form>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

基本上我想做的是，当单击 Submit 按钮时，将输入到 text 框中的值传递给 JavaScript 函数 和控制台记录(现在)。

这看起来已被问过一百万次，但我读过的问题并没有回答我的问题(我不认为)。

编辑 感谢您的所有回复；最大的问题是我试图引用在表单元素之后调用的外部 Javascript 文件中的函数。

Answer 1

没有必要在提交表单处理函数中添加另一个 getElementById()。我对为什么这种方法如此普遍感到困惑。如果您需要获取表单的数十个/所有值，您会怎么做？写几十个元素选择器？

我认为下面的更简洁:

输入可以包含一个 name 属性来简化它们的访问:

  function submitForm(event) {
    alert(event.target.elements.searchTerm.value)
    return false;
  }

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

更好，

function submitForm(that) {
  alert(that.searchTerm.value)
  return false;
}

<form onsubmit="submitForm(this)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

在处理程序本身中，您甚至可以直接访问值:

<form onsubmit="alert(searchTerm); false">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

尽管我不知道为什么最新的示例有效；尚未找到与此相关的任何文档；我开了一个问题here .

如果你通过JS注册事件处理器，this(在非lambda函数中)已经指向了表单元素，所以你也可以这样做

document.querySelector('#myForm').addEventListener('submit', function() {
  event.preventDefault()
  alert(this.elements.searchTerm.value)
});

<form id="myForm">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

如果您想从 HTML 表单中获取键/值映射(普通)对象，请参阅 this answer .