Solved

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

Posted on 2009-07-06
7
972 Views
Last Modified: 2013-12-13
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

0
Comment
Question by:danjen
  • 4
  • 2
7 Comments
 
LVL 1

Expert Comment

by:Mokona
ID: 24790201
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
 
LVL 6

Accepted Solution

by:
coolersport earned 500 total points
ID: 24790213
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
 
LVL 6

Expert Comment

by:coolersport
ID: 24790229
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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 6

Expert Comment

by:coolersport
ID: 24790235
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
 
LVL 1

Expert Comment

by:Mokona
ID: 24790250
I simply corrected his code and has i posted it works fine, but is true that your's is cleaner.
0
 

Author Closing Comment

by:danjen
ID: 31600404
thank you so much. That is much better!
0
 
LVL 6

Expert Comment

by:coolersport
ID: 24790270
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

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now