如何通过点击链接提交带有JavaScript的表单？

最好的方式

最好的方法是插入适当的输入标记：

<input type="submit" value="submit" />

最好的JS方式

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

如果尚未将后一个 JavaScript 代码括起来，请用事件（仅选择向后兼容）进行排序：DOMContentLoadedload

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

简单，不可重新指挥的方式（前一个答案）

将属性添加到链接和表单：onclickid

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

所有方式

无论你选择哪种方式，你最终都会调用（标签的DOM对象在哪里）。formObject.submit()formObject<form>

您还必须绑定这样的事件处理程序，该事件处理程序调用 ，因此当用户单击特定链接或按钮时，将调用它。有两种方法：formObject.submit()

• 推荐：将事件侦听器绑定到 DOM 对象。

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });
  

• 不建议：插入内联 JavaScript。不建议使用此方法有几个原因。一个主要的论点是将标记（HTML）与脚本（JS）混合在一起。代码变得无组织且相当不可维护。

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>
  

现在，我们来到了您必须决定触发 submit（） 调用的 UI 元素的点。

1. 一个按钮

   <button>submit</button>
   

2. 链接

   <a href="#">submit</a>
   

应用上述技术以添加事件侦听器。

如果您使用jQuery并且需要内联解决方案，这将非常有效;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

此外，您可能希望替换

<a href="#">text</a>

跟

<a href="javascript:void(0);">text</a>

因此，用户在单击链接时不会滚动到页面顶部。