如何通过单击链接提交带有 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();
});

如果您尚未这样做，请通过DOMContentLoaded事件（选择仅load以实现向后兼容性）包含后者的 JavaScript 代码：

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是<form>标签的 DOM object）。

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

• 推荐：将事件监听器绑定到 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(); });

• 不推荐：插入内联 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;
    };
};

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

Answer 4

无需任何特殊的 function 即可正常工作。 使用 php 也更容易编写。 <input onclick="this.form.submit()"/>

Answer 5

HTML & CSS - 否 Javascript 解决方案

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

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

Answer 7

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

它在我的情况下完美。

您也可以在 function 中使用它，

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

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

Answer 8

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

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

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

button{
  display: none;
}

在 JS 你这样做：

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

那里有 go。

Answer 9

我的建议是：

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