HTML onChange for SELECT not working on IE

Question

I'm developing a form with PHP and jQuery.

Here is the link:

http://www.yamaha-motor.com.pe/extreme/php/yamaha/registro/FrmRegistro01.php

It works fine on Firefox but not on IE.

What can you advise me??

Thanks

Answer 1

Well your page is so complex and littered with cut-and-paste code it's difficult to know what exactly the problem is you want to demonstrate. But a brief flick through the script reveals that you are sniffing for addEventListener and sniffing for IE in particular, and doing completely different things for each, a lot of which are simply commented out. So what do you expect?

$('select#cbxMeses').attr('onchange', "javascript:fn_mesSeleccionado()");

This is an obvious wrongness. Firstly because event handler attributes should not have javascript: at the start (that's only for javascript: pseudo-URLs, which should also never be used).

But in any case this isn't at all the right way to attach event handlers to elements; it won't work in IE, and it's ugly and inefficient to be putting JS code in strings. Use a function (either a function name or an inline function() { ... }) and one of jQuery's event binding methods.

$(document).ready(function() {
    $('#cbxMeses').change(fn_mesSeleccionado);
    $('#cbxAnos').change(fn_anoSeleccionado);
    ...
});

This works everywhere! There's no need to sniff browsers at all!

Answer 2

I just solved it.

The fix was to not to do something like:

$('select#cbxMeses').attr('onchange', "javascript:fn_mesSeleccionado()");

... and do this:

var select1 = document.getElementById("cbxMeses");
select1.changed = false;
select1.onchange = fn_mesSeleccionado;

Apparently IE tries to execute all JavaScrpit code before all DOM elements are rendered.