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>

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>

• javascript
• jquery
• html

• i notice that you put the submit button in an if condition.. maybe it doesn't submit coz the condition always resulted false.. – Manie Commented Aug 24, 2010 at 4:38

2 Answers 2

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.

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