点击 JavaScript 提交表单

Ammar Ali 2023年1月30日 2021年7月3日
  1. 通过单击链接并使用 JavaScript 中的 submit() 函数提交表单
  2. 通过单击按钮并使用 JavaScript 中的 submit() 函数提交表单
点击 JavaScript 提交表单

本教程将讨论如何使用 JavaScript 中的 submit() 函数提交表单。

通过单击链接并使用 JavaScript 中的 submit() 函数提交表单

在 JavaScript 中,你可以使用 form 标签创建一个表单,你可以使用 id 属性给表单一个 id,之后,你必须选择一种提交表单的方法,你可以提交表单单击链接或按钮时。现在,有两种提交表单的方法,你可以使用 onclick 属性在 HTML 代码中执行此操作,也可以在 JavaScript 中执行此操作。例如,让我们使用 onclick 属性在 HTML 中提交一个表单。请参考下面的代码。

<form id="FormId">
  <a href="FormLink" id = "LinkID" onclick="document.getElementById('FormId').submit();"> SubmitForm </a>
</form>

你可以根据需要更改上述代码中的 form ID 和链接 ID。不推荐使用此方法,因为你将 HTML 与 JavaScript 代码混合在一起。你还可以通过使用表单和链接的 id 在 JavaScript 中单独执行此操作。例如,让我们使用单独的 JavaScript 进行上述操作。请参考下面的代码。

var myform = document.getElementById("FormId");
document.getElementById("LinkId").addEventListener("click", function () {
  myform.submit();
});

建议使用此方法,因为 HTML 和 JavaScript 位于不同的文件中。请注意,你必须使用在 HTML 中定义的表单 id 和链接 id 才能在 JavaScript 中获取这些元素。单击链接时将提交表单。

通过单击按钮并使用 JavaScript 中的 submit() 函数提交表单

你可以使用按钮提交表单。提交表单有两种方法,你可以使用 onclick 属性在 HTML 代码中执行此操作,也可以在 JavaScript 中执行此操作。例如,让我们使用 onclick 属性在 HTML 中提交一个表单。请参考下面的代码。

<form id="FormId">
  <button id = "ButtonId" onclick="document.getElementById('FormId').submit();"> SubmitForm </button>
</form>

与上述方法类似,不推荐使用此方法,因为你将 HTML 与 JavaScript 代码混合。让我们使用单独的 JavaScript 来完成上述操作。

var myform = document.getElementById("FormId");
document.getElementById("ButtonId").addEventListener("click", function () {
  myform.submit();
});
Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相关文章 - JavaScript Form