HTML Reset button not triggering JQuery bound function

Question

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

Bendoh · Accepted Answer · 2012-09-11 03:26:17Z

3

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'); });

answered Sep 11, 2012 at 3:26

Bendoh

5854 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

answerer · Accepted Answer · 2012-09-11 03:52:22Z

2

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/

edited Sep 11, 2012 at 3:52

answered Sep 11, 2012 at 3:47

answerer

1,36810 silver badges9 bronze badges

Comments

jcater · Accepted Answer · 2012-09-11 03:26:27Z

1

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.

answered Sep 11, 2012 at 3:26

jcater

5014 silver badges7 bronze badges

Comments

jacobq · Accepted Answer · 2012-09-11 03:28:14Z

1

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);
})

answered Sep 11, 2012 at 3:28

jacobq

11.6k4 gold badges44 silver badges73 bronze badges

Comments

Musa · Accepted Answer · 2012-09-11 03:32:33Z

1

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

answered Sep 11, 2012 at 3:32

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

nrutas · Accepted Answer · 2014-10-29 20:41:02Z

0

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">

answered Oct 29, 2014 at 20:41

nrutas

5,0412 gold badges18 silver badges16 bronze badges

Collectives™ on Stack Overflow

HTML Reset button not triggering JQuery bound function

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related