捕获一个表单在JavaScript中提交
似乎有很多关于如何使用JavaScript提交表单的信息，但我正在寻找一种解决scheme来捕获表单已被提交并拦截在JavaScript中。
HTML
<form> <input type="text" name="in" value="some data" /> <button type="submit">Go</button> </form> 当用户按下提交button时，我不希望表单被提交，而是我想要调用一个JavaScript函数。
function captureForm() { // do some stuff with the values in the form // stop form from being submitted }
一个快速的黑客将是添加一个onclick函数的button，但我不喜欢这个解决scheme…有很多方法来提交表单…例如按回车，而在一个input，这是没有考虑。
泰
<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属性更好，因为它保持了标记和function的分离。 但那只是我的两分钱。
Edit2 ：更新我的例子，包括preventDefault()
在附加元素之前，您不能附加事件已经加载
这个工程 –
平原JS
DEMO
// Should only be triggered on first page load alert('ho'); window.onload=function() { document.getElementById('my-form').onsubmit=function() { /* do what you want with the form */ // Should be triggered on form submit alert('hi'); // You must return false to prevent the default form behavior return false; } }
jQuery的
// Should only be triggered on first page load alert('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 alert('hi'); }); });
<form onSubmit="captureForm()">应该这样做。 确保您的captureForm()方法返回false 。
使用@Kristian Antonsen的答案，或者你可以使用：
$('button').click(function() { preventDefault(); captureForm(); });
处理所有请求的另一个选项，我在我的练习中使用onload不能帮助的情况是处理javascript提交，html提交，ajax请求。 这些代码应该添加在body元素的顶部，以便在任何表单呈现和提交之前创build侦听器。
在示例中，我将隐藏字段设置为页面上的任何表单，即使在页面加载之前发生。
//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);
