在 JavaScript 中拦截表单提交并阻止正常提交

Question

似乎有很多关于如何使用 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 功能，但我不喜欢这个解决方案……有很多方法可以提交表单……例如，在输入时按下回车，这不考虑。

泰

原文由 mrwooster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Michael McTiernan 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

处理我在实践中使用的所有请求的另一种选择是处理 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);

原文由 Vitaliy Borisok 发布，翻译遵循 CC BY-SA 3.0 许可协议