CODEWITHSUNDEEP
jquery
Norse
Norse

Reputation: 5757

HTML Reset button not triggering JQuery bound function

I have this bound event on all matching inputs:

$('input[name$="_keyword"]').each(function() {
    $(this).bind("propertychange keyup input paste", function(event){
    if ($(this).val() != '') {
        $(this).prevAll('select').attr('disabled', true);
    } else {
        $(this).prevAll('select').attr('disabled', false);
    }
    });
});

This will disable the related dropdown menu if text has been typed into it's text input.

However, if I type someone in one of the _keyword inputs, thus disabling the related dropdown menu, and hit my HTML reset button, all fields in the form will clear but the dropdown menus will not enable. How can I have these enable when the reset button is clicked?

<input type="reset" value="Reset"/>

JSFIDDLE

Upvotes: 3

Views: 1046

Answers (6)

nrutas
nrutas

Reputation: 5051

combining a couple of the answers above, I would do this to reset the select elements in a form and trigger the change function

$('form').on('reset', function() { $('form select').val('all').trigger('change'); });

use an HTML reset button inside of your form markup

<input type="reset" id="reset" value="Reset">

Upvotes: 0

robynhenderson
robynhenderson

Reputation: 1368

You'll need to trigger one of the events in the bind (eg propertychange) via a click handler on the reset button. 

$('input:reset').click(function() {
  $('input[name$="_keyword"]').val('').trigger("propertychange");
});

See working fiddle:

http://jsfiddle.net/GHpmh/1/

Upvotes: 2

Musa
Musa

Reputation: 97672

You can listen for the reset event on the form and enable the selects there

$('form').on('reset', function() {
    $('select', this).prop({disabled: false});
});

​ DEMO

Upvotes: 1

jacobq
jacobq

Reputation: 11557

How about adding a click handler to your reset button to do it? For example:

$("input[type=\"reset\"]").on("click", function(event) {
    $("select").attr('disabled', true);
})

Upvotes: 1

jcater
jcater

Reputation: 501

A form reset does not trigger any of those events you are listening for. You also need to bind the "reset" event. Unfortunately, you have to bind that at the form level, not on individual fields, as not all browsers will bubble the reset event to fields.

Upvotes: 1

Bendoh
Bendoh

Reputation: 585

You can register a handler on the form's reset event to re-enable the drops-downs:

 $('form').on('reset', function() { $('form select').removeAttr('disabled'); });

Upvotes: 3

Related Questions