problem with radio button toggle in firefox

Hello everyone. I have been trying to fix this problem for a long time now and have yet to discover the solution. I have a form on a clients website where the users specify their shipping choice by using a radio button. Once the user chooses a radio button, a div is displayed that provides further description of their choice. This works in Internet Explorer, but I cannot get it to work in FireFox. In fire fox, the radio buttons disappear and don't toggle the div's properly.

Here's the code I am using:

In the header:

<style type="text/css"> 
#shipping_standard_content { background: transparent url(/images/lorry.png) no-repeat;margin-top:8px;padding-left:20px;} 
#shipping_2-day_content { background: transparent url(/images/lorry_add.png) no-repeat;margin-top:8px;padding-left:20px;display: none; } 
#shipping_next_day_content { background: transparent url(/images/lorry_go.png) no-repeat;margin-top:8px;padding-left:20px;display: none; }
</style> 
<script type="text/javascript"> 
function toggle(theDiv) { 
 document.getElementById("shipping_standard_content").style.display = "none";
 document.getElementById("shipping_2-day_content").style.display = "none"; 
 document.getElementById("shipping_next_day_content").style.display = "none"; 
 document.getElementById(theDiv).style.display = "block"; 
 } 
</script>

Code (markup):

in the body:

<fieldset id="wf_shipping" class="required">
  <legend>Preferred Shipping</legend>
  <label for="shipping_standard" class="preField">UPS Standard: *</label>
  <span class="oneField">
    <input type="radio" name="shipping" id="shipping_standard" checked="checked" value="Standard"  onclick="toggle('shipping_standard_content');">
  </span>
  <label for="shipping_2-day" class="preField">UPS 2-Day: *</label>
  <span class="oneField">
    <input type="radio" name="shipping" id="shipping_2-day" value="2-Day" onclick="toggle('shipping_2-day_content');">
  </span>
  <label for="shipping_next_day" class="preField" >UPS Next Day: *</label>
  <span class="oneField">
   <input type="radio" name="shipping" id="shipping_next_day" value="Next_Day" onclick="toggle('shipping_next_day_content');">
  </span>
  <div id="shipping_standard_content">Standard Shipping: (1-5 business days)</div>
  <div id="shipping_2-day_content">2-Day Shipping: (2 business days)</div>
  <div id="shipping_next_day_content">Next Day Shipping: (1 business day)</div>
</fieldset>

Code (markup):

Again, this works in IE, but not FireFox, what could be causing this?

Regards,
Jordan

 

this is quite strange that why radio button is dissappearing itself, when you are not trying to dissappear it in your javascript.. it should be dissappear, may be something wrong with html structure...

the code seems fine. you can try the below few things;

1) to start debugging, lets move the divs outside of fieldset and try it...

2) in firefox, the below css styling may be conflicting with javascript;

#shipping_standard_content { background: transparent url(/images/lorry.png) no-repeat;margin-top:8px;padding-left:20px;}
#shipping_2-day_content { background: transparent url(/images/lorry_add.png) no-repeat;margin-top:8px;padding-left:20px;display: none; }
#shipping_next_day_content { background: transparent url(/images/lorry_go.png) no-repeat;margin-top:8px;padding-left:20px;display: none; }

you used with IDs.. try to make them classes and lets try.. like this;

.shipping_next_day_content { background: transparent url(/images/lorry_go.png) no-repeat;margin-top:8px;padding-left:20px;display: none; }

and then;

<div id="shipping_next_day_content" class="shipping_next_day_content">Next Day Shipping: (1 business day)</div>

if stills won't work. then lets try to remove the display: none from css style... and instead of applying this on css.. make it like this;

<div id="shipping_next_day_content" class="shipping_next_day_content" style="display:none;">Next Day Shipping: (1 business day)</div> (dont forget to remove display:none from css class)

the code itself seems fine... lets try to above few things. hope it will be helpful in someway to make you catch the actual problem..

 

okay, thanks for your help! i will try this and get back to you.

 

none of that solved the problem, but I found out what it was! it was prototypes toggle script that was conflicting with it, all I had to do was change the name of the function from toggle() to something like toggle2(). thanks for your help though.

 

i see.. congratulations! i am happy for you