onchange() event of dropdownlist missing after disabled

Question

I have an ASP.NET MVC project at work. Browser: Internet Explorer (forget what version), but my work machine is 32bit Windows 7.

In one of the view page, I have a dropdownlist. If there is any change, it will populate a text box with certain value. Here is the code (translated to HTML): Please note the drop down list is in a form

<form>
  <select id="searchType" name="searchType" onchange="FillMyTextBox()">
   <option value="1" selected>A</option>
   <option value="2">B</option>
   ...
  </select>
</form>

At the top of page, I have a button called 'Commit'. Once this button is clicked, all fields are disabled and form is submitted. $('input, select').attr('disabled', 'true') The 'Commit' button will be gone, and another button 'Back' appears. This 'Back' button, if clicked, will set all fields editable and form is submitted. $('input, select').removeAttr('disabled') (I guess you are aware of, these two sections of code use jQuery.)

However, once the 'Commit' button is pressed, select has attribute disabled and form is submitted. Once the form / page comes back, I find out the onchange() function is missing in the dropdownlist. Why? I use document.getElementById('searchType).hasAttribute('onchange') and it returns false (when I am in Console tab of Internet Explorer developer tool).

Why the disabled attribute remove the onchange() event of a dropdownlist? Is this a design flaw? I mean if I have many controls on the page, if I disable these controls, but somehow later on enable them back (say user review what has entered, but find out need to re-enter some fields), then I have to re-associate each with its own event, it seems rather inefficient.

[Edit] Stress that drop down list is inside a form and each button will cause the form to be submitted [/Edit]

I've created this pen but I wasn't able to reproduce the issue. Could you check if it's similar to your page?https://codepen.io/cakirilker/pen/QWwbQwM?editors=1111 — İlker Çakır, Dec 05 '19 at 15:05

score 0 · Answer 1 · answered Dec 06 '19 at 01:50

0

Try using $('input, select').prop('disabled', false) to see if it works.

Or in other way this page may help. According to the answer assigning attribute uses $("input").attr('disabled','disabled') and removing by $("input").removeAttr('disabled');

answered Dec 06 '19 at 01:50

Ivan Mok

11
2

onchange() event of dropdownlist missing after disabled

1 Answers1