<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 在表单上设置属性更好，因为它保持了标记和功能的分离。但这只是我的看法。

编辑2 ：更新了我的示例以包括 preventDefault()

据我使用 jsbin.com/ejoyas 所见，这在 Chrome 上也不适用

请注意，attach 事件代码需要在表单在 dom 中可用后执行。例如，使用 window.onload=function() { ... } 来包装它

不确定，因为我不使用 IE，但我认为 attachmentEvent 参数应该是 \'onsubmit\'。

在 2017 年，在回退到 attachmentEvent 之前请检查 addEventListener，因为 IE9+ 支持 addEventListener。

你不能在附加事件的元素加载之前附加事件

建议使用事件监听器 - 一个是在页面加载时使用，另一个是在表单提交时使用。

注意 ： 切勿在表单中调用任何内容\'提交\'

从 IE9 开始此功能有效：

普通/普通 JS

// Should only be triggered on first page load
console.log('ho');

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById('my-form').addEventListener("submit", function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */

    // Will 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>

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 */

    // Will be triggered on form submit
    console.log('hi');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

我认为你的意思是：$('#my-form).on('submit', function() { alert('hi'); });

@Michiel 虽然您提供的内容是与 jQuery 一起使用的内容，但提供的解决方案是纯 JS 解决方案，不依赖 jQuery。此处的解决方案类似于使用

@ChrisMarisic - 几年前:) 无论如何，我已经更新了答案以包含 jQuery

<form onSubmit="return captureForm()"> 应该可以。请确保您的 captureForm() 方法返回 false .

跟进：有没有办法用 JavaScript 捕获表单提交而不影响浏览器对必需属性的处理？

@Elisabeth 对什么属性进行什么处理？如果您的意思是不想阻止表单实际提交，则只需要 captureForm() 返回 true 而不是 false。

浏览器对 \'required\' 属性的处理。我确实想阻止提交表单。但是通过返回 false 而不是 true（或使用 PreventDefault()），它会改变浏览器处理输入元素上的 \'required\' 属性的方式。自己尝试一下：添加 required 到输入元素，捕获提交，看看是否丢失了它的默认行为。

我似乎没有失去默认行为。它在 Chrome 中运行良好。您需要想出一个错误的示例，我才能提供帮助。

好的，表格如下：

在我的实践中，当 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();
});

对于 2.5 年（或更长时间）后执行此操作的人，您需要将点击事件作为参数传递给函数（如 function(e) 并调用 e.preventDefault()

如果您使用了 input[type=\'submit\']，也可以在表单的 \'submit\' 事件中捕获，这会将您置于表单上下文中，而不是按钮上下文中。回调将始终具有事件的上下文，因此您不必传递“e”作为参数，只需引用“事件”即可。