Question

I have a dynamic form where rows are added and removed using JavaScript. From Safari, Chrome and Firefox, the form works beautifully. In IE, well, let’s just say it doesn’t…

<div id="container">
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>
  <div class="row">
    <input name="name[]">
    <select name="color[]">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </select>
  </div>

  <a id="add-another" href="#">Add a row</a>
</div>

<script src="prototype.js"></script>
<script>
  $("container").observe("change", function(ev) {
    alert("changed " + ev.element() + " to " + $F(ev.element()));
  });

  $$("#container input, #container select").each(function(el) {
    el.observe("change", function(ev) {
      alert("changed[2] " + ev.element() + " to " + $F(ev.element()));
    });
  });

  $("add-another").observe("click", function(ev) {
    var cloned = $("container").down(".rule").clone(true);
    $("container").insert({top:cloned});
    ev.stop();
  });
</script>

The only onchange messages I see are the changed[2]. I would much rather see change, since that would mean I have only one listener, not hundreds.

Are there any known workarounds such that I can install a single observer on a parent node, and receive onchange events?

I have read an MSDN article on onchange and I did find a comment to the effect that onchange couldn’t be attached, but maybe there exists a solution?

Answer 1

I’m somewhat surprised that works in Safari, FF, and Chrome. That’s something I would never even think about trying with a wrapper class because it’s not a form element. Clever.

Unless it interferes with something else and until IE is rid from the world for the betterment of humanity, I think a viable alternative may be to leverage either PeriodicalExecutor or an extension of Abstract.TimedObserver to check on the wrapper class every once in a while, potentially in combination for a check for whether the browser is IE or not.