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

我没有提交按钮,而是提供了一个链接:

<form>


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


</form>

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

755416 次浏览

最好的办法

最好的方法是插入一个适当的输入标记:

<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 代码(只选择 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();
    });
    
  • 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>
    

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

  1. A button

    <button>submit</button>
    
  2. A link

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

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

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

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

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

另外,你可能需要更换

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

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

这样用户在点击链接时就不会滚动到页面的顶部。

这个工作没有任何特殊的功能需要。更容易编写与 php

<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>
document.getElementById("theForm").submit();

对我来说很有效。

你可以在函数中使用它,

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

设置“表单”为表单 ID,完成。

这是你问题的最佳答案: 在表格里有这些代码:

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

在 CSS 文件中,执行以下操作:

button{
display: none;
}

在 JS 中,你可以这样做:

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

这就对了。

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;


}

我的建议是:

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