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

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

我有一个非常简单的表单元素（如下）

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

基本上我想做的就是当Submit单击按钮，将值输入到text盒子传递给JavaScript Function和控制台记录（目前）。

这看起来好像已经被问了一百万次，但我读过的问题并没有回答我的问题（我不认为）。

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

没有必要再添加一个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 https://stackoverflow.com/q/57048009/3779853.

如果您通过 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 表单中获取键/值映射（普通）对象，请参阅这个答案 https://stackoverflow.com/a/57047908/3779853.