logo标签列表

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

javascripthtmlformshyperlink
159

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

<form>

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

</form>

当单击时，我能让它提交表格吗？

我使用这个来将一个完全隐藏的表单集成到页面中。但是链接前后有换行符。它们是来自表单元素吗？我想在新标签页中打开链接，target="_blank" 似乎不起作用。 - JPT
3
简而言之：<a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">提交</a>。 - vhs
9个回答
260

最佳方式

最佳方式是插入一个适当的输入标签：

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

您还必须绑定这样一个事件处理程序，该处理程序调用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>
现在，我们来到一个需要决定哪个UI元素触发submit()调用的关键点。

  1. A button

    <button>submit</button>

  2. A link

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

使用上述技术来添加事件监听器。

1
我想应用这个，但在我的端上似乎不起作用。这是一个fiddle链接，https://jsfiddle.net/rbhr9wt2/ - user1149244
在 jsFiddle 的 JavaScript 面板上，单击 "JavaScript"，然后将 "Load Type" 设置为 "No wrap - in <body>"（或 <head>）。默认情况下，它设置为 "onLoad"，之后 DOMContentReady 就不再触发。 - ComFreek
5
请注意：如果您的表单中有一个带有属性name="submit"的按钮，那么您的表单的submit()方法将无法访问。 - 2540625
1
为什么不推荐使用onclick方法？ - nu everest
1
@nueverest，<input type="submit"> 比 <a href="#" onclick="..."> 更具语义意义，这在屏幕阅读器方面尤为重要。如果必须使用后者，我建议利用 ARIA。 - ComFreek
@jaepage 对于 id="submit" 也是一样的情况，submit() 方法将无法访问。 - myfunkyside
77

如果你使用jQuery并需要一个内联的解决方案，这个方法非常有效；

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

另外，你可能想要替换掉

标签。

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

使用

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

当用户点击链接时，为了避免用户滚动到页面顶部，可以使用该方法。

1
我认为最好用<span>文本</span>来实现它。这不是一个链接，href:javascript也不好（很快就会因为安全原因而变得不好...内联JavaScript总有一天会被禁止）。 - Milche Patern
我同意。从问题的性质来看，我选择了简单的答案。我个人的做法是使用 href="#"，然后用jquery选择所有这些链接，并在click事件处理程序中调用e.preventDefault()，以便浏览器不会滚动。 - Maurice
3
我个人喜欢这个答案。如果您的页面使用JQuery，它非常简单、清晰和易于实现。它也非常灵活，因为我有一个包含多个表单的页面，它可以完美地运行。 - John Contarino
1
如果在onClick JavaScript调用的结尾添加"return false"，则可以使用href="#"。 - Lumis
26

您可以为表单和链接分配一些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也可以工作。

6

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;

}
1
优秀，何必复杂化，简单就好。不过，我认为如果在悬停类中添加“cursor: pointer;”，那么光标会变成手形，看起来更好。 - Lumis
5

这个功能不需要特殊的函数就可以很好地运行。而且使用PHP编写也更加容易。<input onclick="this.form.submit()"/>

1
OP 表示“通过点击链接”，而不是输入元素。 - Rahil Wazir
这个能不能通过类似于 <input onclick="this.form.submit()"> Some Text</input> 这样的方式来实现？ - CodyBugstein
5

我的建议是：

<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>
3
<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>
3
你能否解释一下你的回答是如何回答这个问题的？请为它添加更多的背景信息。 - user2140173
2
document.getElementById("theForm").submit();

在我的情况下，它完美地运作。

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

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

将"theForm"设置为你的表单ID。完成了。

0

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

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

在CSS文件中，做这个：
button{
  display: none;
}

在JS中，你可以这样做：

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

就是这样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接