Radio button not working properly in Internet explorer to show content on checked

This question  is an extension on a previous question I posted. I have a form with 2 radio buttons that when one is clicked a dropdown is visible and when the other is checked is it not visible.

In firefox this works perfect. In internet explorer it only works when the text next to the radio button is clicked and not when the actual button is checked.

Please tell me what I did wrong.
<script type="text/javascript">
                var prepMenu = function() {
                        var optionNumberThatShowsMenu = 0; //or whichever radio it is, in this case #0
                        
                        var a = document.forms['cart'].options[optionNumberThatShowsMenu];
                        var m = document.forms['cart'].more
                        m.style.display = ( (a.checked === false) ? 'inline' : 'none' );
                }
                
               var loadRadios = function() {
                        for ( var i = 0; i < document.forms['cart'].options.length; i++ ) {
                                var a = document.forms['cart'].options[i];
                                //set up events
                                a.onchange = prepMenu;
                        }
                        //make menu initially visible (or invisible if that's what you want)
                        prepMenu();
                }
        </script>   
 <form action="<?php echo ($_SERVER["PHP_SELF"].(isset($_SERVER["QUERY_STRING"])?"?".htmlentities($_SERVER["QUERY_STRING"]):""));?>" method="post" id="cart" name="cart">
 
 <table width="500" border="0">
                <tr>
                  <td width="236" height="56" align="left" valign="top">
                 Ship Product<input name="options" type="radio" value="B" checked/></td>
				<td width="221" align="left" valign="top"> Pick up from store<input name="options" type="radio" value="0"  />
 
                    </td>
                  <td width="152" align="left" valign="top">
                      <label>
                        <select name="more" id="more">
                          <option>Choose a location</option>
                          <option value="Agoura Hills">Agoura Hills</option>
                          <option value="Canyon Country">Canyon Country</option>
                          <option value="Chatsworth">Chatsworth</option>
                          <option value="Glendale">Glendale</option>
                          <option value="Moorpark">Moorpark</option>
                          <option value="Oxnard">Oxnard</option>
                          <option value="Santa Barbara">Santa Barbara</option>
                          </select>
                        </label>
</td>
                  </tr>
  </table>
</form>

Open in new window

danjenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MokonaCommented:
Browsers execute code sequentially, so in your case when you search for the form before the form tag it's impossible for the javascript to find it. Just put your javascript after the form tag.

 <form action="" method="post" id="cart" name="cart">
 
 <table width="500" border="0">
                <tr>
                  <td width="236" height="56" align="left" valign="top">
                 Ship Product<input name="options" type="radio" value="B" checked/></td>
                                <td width="221" align="left" valign="top"> Pick up from store<input name="options" type="radio" value="0"  />
 
                    </td>
                  <td width="152" align="left" valign="top">
                      <label>
                        <select name="more" id="more">
                          <option>Choose a location</option>
                          <option value="Agoura Hills">Agoura Hills</option>
                          <option value="Canyon Country">Canyon Country</option>
                          <option value="Chatsworth">Chatsworth</option>
                          <option value="Glendale">Glendale</option>
                          <option value="Moorpark">Moorpark</option>
                          <option value="Oxnard">Oxnard</option>
                          <option value="Santa Barbara">Santa Barbara</option>
                          </select>
                        </label>
</td>
                  </tr>
  </table>
</form>
 
<script type="text/javascript">
                var prepMenu = function() {
                        var optionNumberThatShowsMenu = 0; //or whichever radio it is, in this case #0
                        
                        var a = document.forms['cart'].options[optionNumberThatShowsMenu];
                        var m = document.forms['cart'].more
                        m.style.display = ( (a.checked === false) ? 'inline' : 'none' );
                }
                
               var loadRadios = function() {
                        for ( var i = 0; i < document.forms['cart'].options.length; i++ ) {
                                var a = document.forms['cart'].options[i];
                                //set up events
                                a.onchange = prepMenu;
                        }
                        //make menu initially visible (or invisible if that's what you want)
                        prepMenu();
                }
                loadRadios();
        </script>   

Open in new window

0
coolersportCommented:
A much simpler solution (Tested in IE7, IE6, Firefox):

<form action="" method="post" id="cart" name="cart">
 
 <table width="500" border="0">
                <tr>
                  <td width="236" height="56" align="left" valign="top">
                 <label for="shipping">Ship Product</label><input name="options" type="radio" value="B" checked id="shipping" onclick="toggleDropdown();"/></td>
                                <td width="221" align="left" valign="top"> <label for="pickup">Pick up from store</label><input name="options" type="radio" value="0" id="pickup" onclick="toggleDropdown();" />
 
                    </td>
                  <td width="152" align="left" valign="top">
                      <label>
                        <select name="more" id="more" style="display:none">
                          <option>Choose a location</option>
                          <option value="Agoura Hills">Agoura Hills</option>
                          <option value="Canyon Country">Canyon Country</option>
                          <option value="Chatsworth">Chatsworth</option>
                          <option value="Glendale">Glendale</option>
                          <option value="Moorpark">Moorpark</option>
                          <option value="Oxnard">Oxnard</option>
                          <option value="Santa Barbara">Santa Barbara</option>
                          </select>
                        </label>
</td>
                  </tr>
  </table>
   <script type="text/javascript">
               var toggleDropdown = function() {
					document.getElementById('more').style.display = document.getElementById('pickup').checked ? 'block' : 'none';
                };
        </script>   
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
coolersportCommented:
Mokona, you missed his question. The problem is with clicking on the radio button itself doesn't trigger the event. Using element ids and label tag is a better way to go, I reckon :)
0
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

coolersportCommented:
The fact (for this case) that the script can be loaded before or after, it doesn't matter as it doesn't get called while the page is loading. The function is only called when user click on the radios.
0
MokonaCommented:
I simply corrected his code and has i posted it works fine, but is true that your's is cleaner.
0
danjenAuthor Commented:
thank you so much. That is much better!
0
coolersportCommented:
Hi Mokona,

You missed it again. He meant it doesn't work in IE. I tested yours in IE before letting you know though.

Cheers,
Tien
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.