似乎有很多关于如何使用 javascript 提交表单的信息，但我正在寻找一种解决方案来捕获表单何时提交并在 javascript 中拦截它。
HTML
<form>
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
当用户按下提交按钮时，我不希望提交表单，而是希望调用 JavaScript 函数。
function captureForm() {
// do some stuff with the values in the form
// stop form from being submitted
}
一个快速的技巧是向按钮添加一个 onclick 功能，但我不喜欢这个解决方案......有很多方法可以提交表单......例如在输入时按回车，这并没有说明。
泰
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
在JS中：
function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
// You must return false to prevent the default form behavior
return false;
}
var form = document.getElementById('my-form');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
编辑：在我看来，这种方法比onSubmit在表单上设置属性更好，因为它保持了标记和功能的分离。但这只是我的两分钱。
Edit2：更新了我的示例以包括preventDefault()
您无法在附加事件的元素加载之前附加事件
这有效 -
纯JS
推荐使用 eventListener
// Should only be triggered on first page load
console.log('ho');
window.addEventListener("load", function() {
document.getElementById('my-form').addEventListener("submit", function(e) {
e.preventDefault(); // before the code
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
})
});<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>但如果你不需要多个监听器，你可以使用 onload 和 onsubmit
// Should only be triggered on first page load
console.log('ho');
window.onload = function() {
document.getElementById('my-form').onsubmit = function() {
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
// You must return false to prevent the default form behavior
return false;
}
} <form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>jQuery
// Should only be triggered on first page load
console.log('ho');
$(function() {
$('#my-form').on("submit", function(e) {
e.preventDefault(); // cancel the actual submit
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form><form onSubmit="return captureForm()">
应该这样做。确保您的captureForm()方法返回false.
在 onload 无法帮助的情况下，处理我在实践中使用的所有请求的另一种选择是处理 javascript 提交、html 提交、ajax 请求。这些代码应该添加到 body 元素的顶部以在呈现和提交任何表单之前创建侦听器。
在示例中，我将隐藏字段设置为提交时页面上的任何表单，即使它发生在页面加载之前。
//Handles jquery, dojo, etc. ajax requests
(function (send) {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
XMLHttpRequest.prototype.send = function (data) {
if (isNotEmptyString(token) && isNotEmptyString(header)) {
this.setRequestHeader(header, token);
}
send.call(this, data);
};
})(XMLHttpRequest.prototype.send);
//Handles javascript submit
(function (submit) {
HTMLFormElement.prototype.submit = function (data) {
var token = $("meta[name='_csrf']").attr("content");
var paramName = $("meta[name='_csrf_parameterName']").attr("content");
$('<input>').attr({
type: 'hidden',
name: paramName,
value: token
}).appendTo(this);
submit.call(this, data);
};
})(HTMLFormElement.prototype.submit);
//Handles html submit
document.body.addEventListener('submit', function (event) {
var token = $("meta[name='_csrf']").attr("content");
var paramName = $("meta[name='_csrf_parameterName']").attr("content");
$('<input>').attr({
type: 'hidden',
name: paramName,
value: token
}).appendTo(event.target);
}, false);
使用@Kristian Antonsen 的回答，或者您可以使用：
$('button').click(function() {
preventDefault();
captureForm();
});