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

How to submit a form with JavaScript by clicking a link?

提问by sandy

Instead of a submit button I have a link:

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

<form>

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

</form>

Can I make it submit the form when it is clicked?

我可以让它在单击时提交表单吗？

回答by ComFreek

The best way

最好的方法

The best way is to insert an appropriate input tag:

最好的方法是插入一个合适的输入标签：

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

The best JS way

最好的 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();
});

Enclose the latter JavaScript code by an DOMContentLoadedevent (choose only loadfor backward compatiblity) if you haven't already done so:

由封闭后的JavaScript代码DOMContentLoaded事件（只选择load了向后兼容性）如果你还没有这样做：

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

The easy, not recommandable way (the former answer)

简单，不推荐的方式（前一个答案）

Add an onclickattribute to the link and an idto the form:

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

<form id="form-id">

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

</form>

All ways

所有方式

Whatever way you choose, you have call formObject.submit()eventually (where formObjectis the DOM object of the <form>tag).

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

You also have to bind such an event handler, which calls formObject.submit(), so it gets called when the user clicked a specific link or button. There are two ways:

您还必须绑定这样一个调用 的事件处理程序，formObject.submit()以便在用户单击特定链接或按钮时调用它。有两种方式：

• Recommended:Bind an event listener to the DOM object.

  // 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();
  });
  

• Not recommended:Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.

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

• 推荐：给 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>
  

Now, we come to the point at which you have to decide for the UI element which triggers the submit() call.

现在，您必须决定触发 submit() 调用的 UI 元素。

1. A button

   <button>submit</button>
   

2. A link

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

1. 一个按钮

   <button>submit</button>
   

2. 一条链接

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

Apply the aforementioned techniques in order to add an event listener.

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

回答by Maurice

If you use jQuery and would need an inline solution, this would work very well;

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

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

Also, you might want to replace

另外，您可能想更换

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

with

和

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

so the user does not scroll to the top of your page when clicking the link.

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

回答by Darin Dimitrov

You could give the form and the link some ids and then subscribe for the onclickevent of the link and submitthe form:

您可以为表单和链接提供一些 id，然后订阅onclick链接和submit表单的事件：

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

and then:

进而：

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

I would recommend you using a submit button for submitting forms as it respects the markup semantics and it will work even for users with javascript disabled.

我建议您使用提交按钮来提交表单，因为它尊重标记语义，即使对于禁用 javascript 的用户也可以使用。

回答by Darren Murphy

HTML & CSS - No Javascript Solution

HTML & CSS - 没有 Javascript 解决方案

Make your button appear like a Bootstrap link

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

HTML:

HTML：

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

CSS:

CSS：

.btn-link {

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

}

.btn-link:hover {

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

}

回答by chris

this works well without any special function needed. Much easier to write with php as well. <input onclick="this.form.submit()"/>

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

回答by Shashank

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

回答by Chintan Thummar

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

It works perfect in my case.

在我的情况下它很完美。

you can use it in function also like,

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

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

Set "theForm" as your form ID. It's done.

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

回答by iamwave007

here's the best solution to your question: inside the form you have these code:

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

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

in the CSS file, do this:

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

button{
  display: none;
}

in JS you do this:

在 JS 中你这样做：

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

There you go.

你去吧。