html form reset not doing triggering select onchange

Question

I am having a form where the fields need to change according to my select. But when I hit the reset the select resets back to default, but the onchange event on the select is not triggered. Is there anyway so that I can add that to my javascript?

I am resetting using a button with type="reset"

    $('#newHistoryPart select[name="roundType"]').on('change', function (data) 
    {
      $(".answerType").hide();
      selected = $(this).find("option:selected").val();
      roundTypeChange(selected); 
    });

You can use `onreset` event, which is different that `onchange`. This is the cause. — kosmos, May 13 '15 at 12:21
@GuruprasadRao he clearly states he's using a button with type reset. — Joe Swindell, May 13 '15 at 12:22

score 7 · Answer 1 · answered May 13 '15 at 12:26

7

From my comment above, use onreset event instead of onchange:

$('#yourform').on('reset', function(){
    // do something
});

answered May 13 '15 at 12:26

kosmos

4,253
1
18
36

Nifal Munzir · Accepted Answer · 2015-05-14T06:00:17.870

6

What you need to do is, trigger the change event manually when the reset button is clicked. See Fiddle here

$('select').on('change', function () 
{
    alert('on change');
});

$('input[type="reset"]').click(function() {
    $("select").trigger('change');
});`

edited May 14 '15 at 06:00

answered May 14 '15 at 05:44

Nifal Munzir

354
1
6

si there anyway to achieve the opposite? I have a form where on each select changes I filter a table. Now when I reset I need to reset back the selects but this also trigger the select change, so I find myself in an infinite loop. I'm using select2 and the only way I find to reset the select2 select is the following: $(this).find("select").trigger("change"); – onlymushu Mar 30 '17 at 18:58

Mohamed-Yousef · Answer 3 · 2015-05-13T12:33:06.617

0

you can use

$('select[name="roundType"]').prop('selectedIndex',0);

DEMO HERE

edited May 13 '15 at 12:33

answered May 13 '15 at 12:25

Mohamed-Yousef

23,946
3
19
28

score 0 · Answer 4 · answered May 13 '15 at 12:43

This may help you, replace alert lines with your activity code.

JSFiddle

HTML

<select name="opt" onchange="getval(this)">
    <option value="Select" selected disabled>Select</option>
    <option value="op1">Option 1</option>
    <option value="op2">Option 2</option>
</select>

JavaScript

function getval(sel) {
    if (sel.value == "op1") {
        alert("Option 1 Selected");
    } else if (sel.value == "op2") {
        alert("Option 2 Selected");
    }
    else
    {
        alert("EXCEPTION !");
    }
}

html form reset not doing triggering select onchange

4 Answers4