Cannot submit form with .submit()

Question

I need to trigger a form submit event when any form value changes and all the fields in the form are filled. Everything in this works apart from the $('#date_filter_form').submit(); line. I can .hide() the form but can't submit() it for some reason. Documentation says submit() is the same as trigger('submit') so I can't figure out why it wouldn't be working.

$('#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>

• Manie: i notice that you put the submit button in an if condition.. maybe it doesn't submit coz the condition always resulted false..

Answer 1

Your submit button is named 'submit', and it clashes with the form.submit method.

This happens because browsers provide shortcut accessors to form elements, properties that refer to the elements, are bound to the form element, using the name attribute as the property name.

An element named submit will replace the form.submit method, you should simply change name.

Also keep in mind that in IE you will have the same problems with the id attribute.

See also:

• 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.

• Benbob: I don't understand exactly why it clashes but this did fix the issue.
• Christian C. Salvadó: It clashes because browsers provide shortcut accessors to access form elements directly by its name, as properties of the form element, e.g. document.forms.date_filter_form.from_date and submit has a special meaning, is the method used to trigger a form submission, if you have a control named 'submit' will replace the method.
• Benbob: I'm using a form generation library to generate my forms and it names a submit button as submit. How retarded. Never again will I let it name a submit button submit ;)

Answer 2

yo your from is named

date_filter_form

but you are looking for a form named

date_filter 

So your validation is not going to pass

• Benbob: Actually I had a div with id="date_filter" wrapping the form, so that is not the issue. I've updated the question to reflect your suggestion though.