点击 JavaScript 提交表单

Ammar Ali 2023年10月12日
  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();
});
作者: 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