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

Question

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

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

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

当单击提交按钮时，我想做的基本上就是将输入到文本框中的值传递给一个JavaScript函数，并在控制台上记录（目前如此）。

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

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

- grpcMe

---

你是否尝试过使用JavaScript或jQuery来解决这个问题？你能展示一下你尝试过什么，这样我们就可以知道该指出什么来解决你的问题吗？ - Zack

$("form").submit(function(){ // Do stuff }); - DBS

只需使用onsubmit调用函数并使用值进行获取/记录/处理即可。 - LordNeo

使用e.preventdefault，否则页面将刷新，您将无法看到日志。 - avck

这个回答解决了你的问题吗？如何在JavaScript中监听表单提交事件？ - Flimm

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注册事件处理程序，在非lambda函数中this已经指向表单元素，所以你也可以这样做：

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

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

如果您想从HTML表单中获取一个键/值映射(普通)对象，请参见此答案。

- phil294

---

IE不支持HTMLFormControlsCollection，这是event.target.elements的接口，这很可能是人们正在使用元素选择器的原因。 - cleversprocket

正是我要找的。这应该是被采纳的答案。它是DRY且多形式友好的。 - apokaliptis

Answer 2

像这样的吗？

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value);
    return false;
};

JSFiddle链接: https://jsfiddle.net/km7rt62v/

在提交处理程序结束时重要的是要return false;以防止默认行为发生，否则表单将会被提交并重新加载页面。

正如其他人所示，也可以使用表单元素的onsubmit html属性，这是个人喜好，但我更喜欢JS和HTML之间更加清晰的分离。

编辑：既然我已经得到了采纳的答案，而且问题标记有jQuery，那么这里是相应的jQuery等效代码：

$('#theform').submit(function() { 
    console.log($('#searchTerm').val());
    return false;
});

- Andreas Eriksson

Answer 3

这是一段纯粹简单的JavaScript代码。 您也可以使用jQuery。

function checkForm(){
  console.log(document.getElementById('searchTerm').value);
  return false;
}

<form onsubmit='return checkForm();'>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

- Mojtaba

---

不需要javascript:标签，你需要获取该字段的.value。 - mplungjan

e.preventdefault() - avck

返回 false 也可以使用 - 并且适用于更多的浏览器，它是 preventDefault，驼峰式写法。 - mplungjan

我想在一个外部的Javascript文件中定义一个函数，这样可以吗？ - grpcMe

@OmisNomis。是的。只需将您的js文件导入文档即可。 - Mojtaba

Answer 4

提交表单：

JS：

var searchForm= document.getElementById('searchForm');
var submitButton = document.getElementById('submitButton');

searchForm.onsubmit= function () {
  console.log(searchTerm.value);
};

HTML：

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

点击按钮时：

JS:

var searchTerm = document.getElementById('searchTerm');
var submitButton = document.getElementById('submitButton');

submitButton.onclick = function () {
  console.log(searchTerm.value);
};

HTML：

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

查看演示在这里

- Huy Chau

Answer 5

要在外部文件中拥有这样的函数，最好的方法是在onload事件中连接提交事件：

window.onload=function() {
  document.getElementById("form1").onsubmit=function(e) {
    e=e?e:event;
    e.preventDefault(); // cancel the submit
    var val = document.getElementById("searchTerm").value;
    console.log(val);
  }  
}

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

jQuery 版本：

$(function() {
  $("#form1").on("submit",function(e) {
    e.preventDefault(); // cancel the submit
    var val = $("#searchTerm").val();
    console.log(val);
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

- mplungjan

Answer 6

你在标签中打了jQuery，这里是一个jQuery的答案。你需要使用的是.submit()事件处理程序。

$("form").submit(function(e) {
    console.log("form data: %o", $(this).find("#searchTerm").val());
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
</form>

这段代码将会为<form>的 onsubmit事件附加一个处理器：

- cyberbit

Answer 7

当您在表单中包含一个类型为“submit”的输入时，可以使用一个称为onsubmit的属性。这里有一些文档http://www.w3schools.com/tags/ev_onsubmit.asp。

代码应该类似于这样

<form onsubmit="submitForm()">
  <input type="text" id="searchTerm"/>
  <input type="submit" value="Submit" id="submitButton" />
</form>

<script>
  function submitForm() {
    let input = document.querySelector('#searchTerm');
    console.log(input.value);
    return false;
  }
</script>

- Maximilian Lloyd

---

你需要返回 false 或阻止默认事件，否则页面将重新加载。 - mplungjan

我可以让它使用外部JS文件吗？ - grpcMe

当然可以，只需将代码放入一个文件中，例如 script.js。然后在您的 HTML 页面中添加 <script src="script.js"></script>。 - Maximilian Lloyd

Answer 8

所以主要问题是我在我的元素底部包含了

- grpcMe