javascript - 无法使用 .submit() 提交表单

Question

我需要在任何表单值更改且表单中的所有字段都已填写时触发表单提交事件。除了 $('#date_filter_form').submit(); 行之外，这里的所有内容都有效。我可以 .hide() 表单但由于某种原因不能 submit() 。文档说 submit() 与 trigger('submit') 相同，所以我不明白为什么它不起作用。

$('#date_filter_form input[type="text"]').change(function() {
    var from_val = $('#date_filter_form #from_date').val();
    var to_val = $('#date_filter_form #to_date').val();
    if(from_val != '' &&  to_val != '') {
        $('#date_filter_form').submit();
    }
});

HTML:

<form method="post" id="date_filter_form" name="date_filter_form" action="">
   <label class="left required" for="from_date">From</label>
   <input type="text" id="from_date" class="datepicker hasDatepicker" value="" name="from_date">
   <label class="left required" for="to_date">to</label>
   <input type="text" id="to_date" class="datepicker hasDatepicker" value="" name="to_date">

    <input type="hidden" value="" name="from_date_db">
    <input type="hidden" value="" name="to_date_db">

    <input type="submit" id="submit" class="button" value="Show results" name="submit">
</form>

Answer 1

您的 submit 按钮名为 'submit'，它与 form.submit 方法冲突。

这是因为浏览器为表单元素提供了快捷方式访问器，引用元素的属性被绑定(bind)到form元素，使用name 属性作为属性名称。

名为 submit 的元素将替换 form.submit 方法，您只需更改名称即可。

另外请记住，在 IE 中，id 属性也会遇到同样的问题。

另见:

• Form Access - The Most Common Mistake

The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type="submit" with the NAME "submit". Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name "submit". Unfortunately FORM elements already have a property with the name "submit", it is the submit method that can be used to submit the form with a script.