Question

How do you make the onChange event of various form elements bubble up to the parent form object in Internet Explorer? When select boxes, radio button, … almost anything … changes in IE, the parent form’s onChange is not fired. My forms are dynamically changing so it will be hard to hack it by listening on each and every child form element.

HTML

<form id="myForm">
 <select>
  <option>uno</option>
  <option>dos</option>
 </select>
 <input type="radio" name="videoDevice" value="tres" checked="checked" />
 <input type="radio" name="videoDevice" value="cuatro" />
</form>

JS

$('myForm').observe(
 'change', 
 function() {
  // this only runs in non-IE browsers
  alert('the form changed');
 }
);

BTW, I’m using the Prototype framework. Shouldn’t it have handled the cross-browser differences for me?

Answer 1

I had to use a hack for IE. I manually made all the child form elements trigger the onChange callback rather than have the parent form do it. I wish there was a cleaner solution.

$('myForm').select('input', 'radio', 'textarea').each(
 function(formElement) {
  formElement.observe(
   'change', 
   function() {
    alert('changed');
   }
  );
 }
);