如何通过单击链接使用JavaScript提交表单？

Question

我有一个链接而不是“提交”按钮：

<form>

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

</form>

单击后可以提交表单吗？

Answer 1

最好的方式

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

<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代码DOMContentLoaded事件（只选择load了向后兼容性如果你还没有这样做：

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

简单而不可取的方式（以前的答案）

onclick在链接和id表单中添加一个属性：

<form id="form-id">

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

</form>

所有方式

无论选择哪种方式，formObject.submit()最终都可以调用（标记formObject的DOM对象在哪里<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>
  

  submit

现在，我们到了必须确定触发Submit（）调用的UI元素的地步。

1. 一个按钮

   <button>submit</button>
   

2. 一条链接

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

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