拦截使用JavaScript提交的表单并阻止正常提交

似乎有很多有关如何使用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

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
    alert('hi');
  });
});

但是，如果您不需要多个侦听器，则可以使用onload和onsubmit

// 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="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();
});