如何拦截表格可靠地提交？

Question

我正在尝试拦截网页上特定表单的所有表单提交.使用jQuery看起来非常简单:form.submit(function(e) {…})如果单击"提交"按钮,它的工作效果非常好.

但是在select字段上还有一个onChange属性,this.form.submit()看起来这个调用绕过了我的监听器(在Chromium/Firefox中):

<script type="text/javascript">
    function submitForm(e) {
        window.alert('submitted');
        e.preventDefault();
        return false;
    }

    $(document).ready(function() {
        $('#bar').submit(submitForm);
    });
</script>

<form id="bar">
    <select name="name" onChange="this.form.submit()">
        <option>Foo</option>
        <option>Bar</option>
    </select>
    <br/>
    <input type="submit"/>
</form>

显然在上面的代码中我可以更改this.form.submit()为我的提交监听器的特定引用.然而,在我的真实应用程序中,它并不那么简单,所以我正在寻找不需要修改onChange属性的方法.

如果我没有做一个愚蠢的错误,但这实际上是预期的浏览器行为,如果你能解释事件流程以及为什么会导致上述症状,我会很高兴.

Answer 1

调用该form.submit()方法不会触发submit事件,就像例如设置value文本框不会触发其change事件一样.尝试submit通过jQuery 触发事件:

<form id="bar">
    <select name="name" onChange="$('#bar').submit();">
        <option>Foo</option>
        <option>Bar</option>
    </select>
    <br/>
    <input type="submit"/>
</form>

根据文档,submit将触发表单上的默认操作,并提交表单.