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

Posted 2023-02-21

【中文标题】如何通过单击链接使用 JavaScript 提交表单？

【英文标题】：How to submit a form with JavaScript by clicking a link?

【发布时间】：2011-10-11 14:07:06

【问题描述】：

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

<form>

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

</form>

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

【问题讨论】：

我用它来将一个完全隐藏的表单集成到一个页面中。但是链接前后都有换行符。它们来自表单元素吗？我想在新标签页/页面中打开链接，target="_blank" 似乎不起作用。

tl;dr <a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a>

【参考方案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 事件将后面的 JavaScript 代码括起来（对于 backward compatiblity，请仅选择 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 是<form> 标记的DOM 对象）。

您还必须绑定这样一个事件处理程序，它调用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 元素。

一个按钮

<button>submit</button>

一个链接

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

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

【讨论】：

我想应用这个，但它似乎对我不起作用。这是一个小提琴，jsfiddle.net/rbhr9wt2

@user1149244 在 jsFiddle 的 JavaScript 窗格中单击“JavaScript”，然后将“加载类型”设置为“无换行 - ”（或 ）。默认情况下，它设置为“onLoad”，之后 DOMContentReady 不再触发。

注意：如果您的表单有一个属性为name="submit" 的按钮，您的表单的submit() 方法将无法访问。

为什么不推荐onclick方式？

@nueverest <input type="submit"> 比<a href="#" onclick="..."> 具有更多的语义含义。这对于屏幕阅读器尤其重要。如果你必须使用后者，我建议使用ARIA。

【参考方案2】：

你可以给表单和链接一些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 的用户也可以使用。

【参考方案3】：

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

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

另外，你可能想替换

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

与

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

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

【讨论】：

我相信最好把它放在 text 中。这不是一个链接，并且 href:javascript 不好。 （由于下一个安全原因，很快就会变得很糟糕......内联的javascript总有一天会被禁止。

我同意。从问题的性质来看，我选择了简单的答案。我个人所做的是使用href="#"，然后使用jquery 选择所有这些链接并在click 事件处理程序中调用e.preventDefault()，这样浏览器就不会滚动。

我个人更喜欢这个答案。如果您的页面使用 JQuery，则简单、干净且易于实现。也非常灵活，因为我有一个页面上有多个表单，而且它可以完美运行。

如果在 onClick javascript 调用“return false”的末尾添加，可以使用 href="#"

【参考方案4】：

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

【讨论】：

OP 声明 通过点击链接 不是输入元素。

这可以通过像<input onclick="this.form.submit()"> Some Text</input>这样的方式来实现吗

【参考方案5】：

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

【讨论】：

你能解释一下你的答案是如何回答这个问题的吗？请为其添加更多上下文。

【参考方案6】：

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

在我的情况下效果很好。

你也可以在函数中使用它，

function submitForm()

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

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

【参考方案7】：

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

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

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

button
  display: none;

在 JS 中你这样做：

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

你去。

【参考方案8】：

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;

【讨论】：

太好了，既然可以简单，为什么要复杂。但是，我认为如果您还添加“光标：指针；”它看起来会更好。在悬停类中，所以光标变成了手。

【参考方案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>