我有一个链接,而不是提交按钮:
<form>
<a href="#"> submit </a>
</form>
我可以让它在单击时提交表单吗?
我有一个链接,而不是提交按钮:
<form>
<a href="#"> submit </a>
</form>
我可以让它在单击时提交表单吗?
最好的方法是插入一个合适的输入标签:
<input type="submit" value="submit" />
<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 元素。
一个按钮
<button>submit</button>
一条链接
<a href="#">submit</a>
应用上述技术以添加事件侦听器。
如果您使用 jQuery 并且需要内联解决方案,这将非常有效;
<a href="#" onclick="$(this).closest('form').submit();">submit form</a>
此外,您可能想更换
<a href="#">text</a>
和
<a href="javascript:void(0);">text</a>
因此用户在单击链接时不会滚动到页面顶部。
您可以为表单和链接提供一些 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;
}
这很好用,不需要任何特殊功能。用 php 编写也容易得多。<input onclick="this.form.submit()"/>