Hi all...

I hope someone can help.

We have a quote ajax form that works in Firefox (the dropdown values can be seen), but doesn't in IE.

See - http://www.villagevetinsurance.co.uk/quote_engine/

The problem is with step 2 of the process.

On step 1 - just put in a post code (i.e. sw7 2rl)... then click 'Go to step 2'.

On step 2 - click the 'Cat' or 'Dog' radio buttons.
In Firefox choosing between the 2 radio buttons, changes the 'Pet breed' - (either cat breeds or dog breeds) that populates the dropdown (which come from a MySQL database).

I'm hoping it is a good old Microsoft IE CSS issue.... :(

Any advice or even a solution would be very much appreciated.


show the code that you want examined, the site only shows output

Hi there...

I have posted the files concerned here:

The Javascript is in the head of the index.html
index.html pulls in pet-form.tpl.html for this step (step2).

Hope this helps...

It's been hinted to me that the following code could be causing the problem for the dropdown to work in Firefox and not work in IE:

function pet_type_change_handler()
            for (var j = 0; j < numberOfPets; j++)
               if ( $("#tab" + j).css("display") == "block" )
                  $("#selBreed" + j).attr("options").length = 0;
                  // add "please select" option...
                  $("<option/>").attr("value","").attr("text"," - please select").appendTo("#selBreed" + j);
                  if ($("#rdPetTypeCat" + j).attr("checked") == true)
                     // dealing with cats...
                     for ( var i=0; i<__cats.length; i++ )
                        $("<option/>").attr("value",__cats[i].id).attr("text",__cats[i].name).appendTo("#selBreed" + j);
                  else if ($("#rdPetTypeDog" + j).attr("checked") == true)
                     // dealing with dogs...
                     for ( var i=0; i<__dogs.length; i++ )
                        $("<option/>").attr("value",__dogs[i].id).attr("text",__dogs[i].name).appendTo("#selBreed" + j);