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

IT技术 javascript html forms hyperlink
2021-02-04 16:38:59

我有一个链接,而不是提交按钮:

<form>

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

</form>

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

6个回答

最好的方法

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

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

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

@user1149244 在 jsFiddle 的 JavaScript 窗格中,单击“JavaScript”,然后将“加载类型”设置为“不换行 - <body>”(或 <head>)。默认情况下,它设置为“onLoad”,之后 DOMContentReady 不再触发。
2021-03-16 16:38:59
@nueverest An 的<input type="submit">语义比比方说的多<a href="#" onclick="...">这对于屏幕阅读器尤其重要。如果您必须使用后者,我建议您使用ARIA
2021-03-27 16:38:59
我想应用它,但它似乎对我不起作用。这是一个小提琴,jsfiddle.net/rbhr9wt2
2021-03-29 16:38:59
为什么不推荐使用 onclick 方法?
2021-03-31 16:38:59
注意:如果您的表单有一个带有 attr 的按钮,您的表单name="submit"submit()方法将无法访问。
2021-04-10 16:38:59

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

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

此外,您可能想更换

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

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

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

如果在 onClick javascript 调用“return false”的末尾添加,则可以使用 href="#"
2021-03-14 16:38:59
我个人更喜欢这个答案。如果您的页面使用 JQuery,则简单、干净且易于实现。也非常灵活,因为我有一个页面,上面有多个表单,并且可以完美运行。
2021-03-22 16:38:59
我同意。从问题的性质来看,我选择了简单的答案。我亲自做的是使用href="#",然后选择使用jQuery和调用这些链接e.preventDefault()click事件处理程序,以便浏览器不滚动。
2021-03-24 16:38:59
我相信最好将它放在 <span>text</span> 中。它不是链接,href:javascript 不好。(由于下一个安全原因,很快就会变得糟糕……内联 javascript 总有一天会被禁止。
2021-03-27 16:38:59

您可以为表单和链接提供一些 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;

}
太好了,既然可以简单,为什么还要让它复杂化。但是,我认为如果您还添加“光标:指针”,效果会更好。在悬停类中,所以光标变成了手。
2021-03-14 16:38:59

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

OP通过单击链接而非输入元素来表示。
2021-03-15 16:38:59
这可以通过做类似的事情来工作 <input onclick="this.form.submit()"> Some Text</input>
2021-04-04 16:38:59