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

除了提交按钮外，我还有一个链接：

<form>

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

</form>

单击后可以提交表格吗？

最好的方式

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

<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>
  

现在，我们要确定触发UI（）调用的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>

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

您可以为表单和链接提供一些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的用户也可以使用。

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;

}

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

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

document.getElementById("theForm").submit();

就我而言，它非常完美。

您也可以在功能中使用它，

function submitForm()
{
     document.getElementById("theForm").submit();
} 

将“ theForm”设置为您的表单ID。完成。

这是您问题的最佳解决方案：在表单中，您具有以下代码：

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

在CSS文件中，执行以下操作：

button{
  display: none;
}

在JS中，您可以这样做：

$("a").click(function(){
   $("button").trigger("click");
})

你去。