如何通过点击链接提交带有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>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>
  

现在,我们来讨论触发submit()调用的UI元素.

1. 一个按钮

   <button>submit</button>
   

2. 一条链接

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

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

Answer 2

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

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

此外,您可能想要替换

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

同

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

因此,单击链接时用户不会滚动到页面顶部.

Answer 3

您可以为表单和链接提供一些ID,然后订阅onclick链接和submit表单的事件:

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

然后:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

我建议你使用提交按钮提交表单,因为它尊重标记语义,它甚至适用于禁用javascript的用户.

Answer 4

这很好用，不需要任何特殊功能。用 php 编写也容易得多。<input onclick="this.form.submit()"/>

Answer 5

HTML & CSS - 没有 Javascript 解决方案

让你的按钮看起来像一个 Bootstrap 链接

HTML：

<form>
    <button class="btn-link">Submit</button>
</form>

CSS：

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

Answer 6

我的建议是：

<form action="/logout" method="POST">
    <button type="submit" style="display:none;">Log Out</button>
    <a href="/logout" onclick="event.preventDefault();this.closest('form').submit();">Log Out</a>
</form>