代码之家 › 专栏 › 技术社区 › Felix Schwarz

如何可靠截取表单提交?

onsubmit jquery

6

Felix Schwarz · 技术社区 · 14 年前

我正试图截取网页上特定表单的所有表单提交。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>

显然,在上面的代码中,我可以更改 此.Form.Submit()。 我的提交侦听器的特定引用。然而,在我的真实应用程序中,这并不是那么简单,所以我正在寻找一种不需要修改onchange属性的方法。

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

1 回复 | 直到 10 年前

1

10

Frédéric Hamidi 14 年前

调用 form.submit() 方法不触发 submit 事件,就像设置 value 不触发文本框的 change 事件。尝试触发 提交 改为通过jquery的事件:

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

根据 documentation ,默认的 提交 对表单的操作将被激发并提交表单。