Link to home
Start Free TrialLog in
Avatar of moonrisesystems
moonrisesystems

asked on

JavaScript. Radio buttons. if checked, change display.

Good morning experts.

What I am trying to do is display a hidden section of HTML when a radio button is clicked, and hide other sections that might have all ready been displayed.

This part is working fine, but I am having 2 problems.

1)  When the page loads, a radio button may all ready be checked.  What I need is to have the hidden field for this radio button displayed, so far no luck on this.

2) When you click on a radio button (other then the first in the list)  you check it, the hidden field is displayed,  but the radio button does not stay checked, so you end up having to click it twice.

Here is my existing code, like I said, it is allmost working minus these two problems.
--------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
                        <script language="JavaScript" type="text/javascript">
                        //Opens the "more information" section for each radio button.
                              function Shelp(a,id){
                              document.getElementById(id).style.display=(document.getElementById(id).style.display=='none')?'block':'none';
                              a.innerHTML=(document.getElementById(id).style.display=='none')?'More info':'Close info';
                              }
                        </script>
<script type="text/JavaScript">

<!--
function ShowRow(theTable)
{
     obj = document.getElementsByTagName('TR');
      for (i=0; i<obj.length; i++)
     {
          if (obj[i].id == theTable)
          obj[i].style.display = 'block';
     }
}
//-->

<!--
function HideRow(theTable)
{
     obj = document.getElementsByTagName('TR');
      for (i=0; i<obj.length; i++)
     {
          if (obj[i].id == theTable)
          obj[i].style.display = 'none';
     }
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="AdSYS_TABLE_BORDER">
<!--ITEM 1-->
      <tr>
            <td class="AdSYS_TD_2" height="22" width="90%"><input type="radio" onfocus="ShowRow('TypeTextLinkAd');  HideRow('TypeImageAd'); HideRow('TypeHTMLAd');return true;" name="BannerType" value="TypeTextLinkAd">&nbsp;Item 2</td>
            <td class="AdSYS_TD_2" height="22" width="10%" valign="right">&nbsp;&nbsp;&nbsp;<a href="#" onclick="Shelp(this,'1');">More info</a></td>
      </tr>
      <tr id="TypeTextLinkAd" style="display: none;">
            <td colspan="2" width="100%">
                  <table width="100%">
                        <tr><td  width="100%" class="tblhead" align="left" colspan="3">&nbsp;<span class="SectionTitle">Third party code</span></td></tr>
                        <tr>
                              <td align="left" height="23" class="AdSYS_TD_2" width="30%">&nbsp;<b>If you are using 3rd party code, please include it here.</td>
                              <td height="23" class="AdSYS_TD_3" width="70%" colspan="2">&nbsp; <textarea class="formstandardAREA" rows="6" name="bTextLinkAd" id="bTextLinkAd" cols="65"></textarea></td>
                        </tr>
                  </table>
            </td>
      </tr>
      <tr>
            <td class="AdSYS_TD_2"  width="100%"colspan="3" style="border-bottom: thin solid #cccccc;">
                  <div id="1" style="display:none;">
                  <table width="100%"><tr><td class="AdSYS_TD_2" width="100%" style="background-color:#f5f5f5;" colspan="4"><p>-- Third party code uses Target URL and Third party code box.<br/></p><span style="font-weight:bold;">Features:</span><br/><br/></td></tr></table>
                  </div>
            </td>
      </tr>

<!--ITEM 2-->
      <tr>
            <td class="AdSYS_TD_2" height="22" width="90%"><input type="radio" onfocus="ShowRow('TypeHTMLAd'); HideRow('TypeImageAd'); HideRow('TypeTextLinkAd');return true;" name="BannerType" value="TypeHTMLAd">&nbsp;Item 2</td>
            <td class="AdSYS_TD_2" height="22" width="10%" valign="right">&nbsp;&nbsp;&nbsp;<a href="#" onclick="Shelp(this,'2');">More info</a></td>
      </tr>
      <tr id="TypeHTMLAd" style="display: none;">
            <td colspan="2">
                  <table width="100%">
                        <tr><td  width="100%" class="tblhead" align="left"colspan="4">&nbsp;<span class="SectionTitle">Images &amp; HTML file ad's</span></td></tr>
                  </table>
            </td>
      </tr>
      <tr>
            <td class="AdSYS_TD_2"  width="100%"colspan="3"  style="border-bottom: thin solid #cccccc;">
                  <div id="2" style="display:none;">
                  <table width="100%"><tr><td class="AdSYS_TD_2"  width="100%"  style="background-color:#f5f5f5;"><p>-- HTML Files uses Local file. Use this to display an uploaded HTML file.<br/><br/></p><span style="font-weight:bold;">Features:</span><br/><br/></td></tr></table>
                  </div>
            </td>
      </tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------


Thanks for the help
-Eric

ASKER CERTIFIED SOLUTION
Avatar of archrajan
archrajan
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of archrajan
archrajan
I have changed ur onfocus event to onclick event.. thats the one u shud use in this situation..
and also in my above example i have checked the radio button 1 to show u the code works..
and also included a form name frm
Avatar of ellandrd
ellandrd
Flag of Ireland image
here is another example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
function render(c, t)
{
     if (c.checked)
     {
          document.getElementById(t).style.display="block"
     }
     else
     {
          document.getElementById(t).style.display="none"
     }
}
//-->
</script>
</head>
<body>
<form name="settings" method="post">
<p>
     <input type="radio" value="US" name="countries" onClick="render(this, 'tblUS'); document.getElementById('tblCanada').style.display='none'; document.getElementById('tblOther').style.display='none';">US<br>
     <input type="radio" value="Canada" name="countries" onClick="render(this, 'tblCanada'); document.getElementById('tblUS').style.display='none'; document.getElementById('tblOther').style.display='none';">Canada<br>
     <input type="radio" value="Other" name="countries" onClick="render(this, 'tblOther'); document.getElementById('tblUS').style.display='none'; document.getElementById('tblCanada').style.display='none';">Other<br>
</p>
<table id="tblUS" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select State<b></td>
          <td width="25%">
          <%
          Dim adoCon1
          Dim recordSet1
          Dim strSQL1
          Set adoCon1 = Server.CreateObject("ADODB.Connection")
          adoCon1.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("data.mdb")
          Set recordSet1 = Server.CreateObject("ADODB.Recordset")
          strSQL1 = "SELECT tblCountries.CountryName FROM tblCountries WHERE CountryID = 1;"
          recordSet1.Open strSQL1, adoCon1
          Response.Write ("<select name=""states"">")
          Response.Write ("<option value=""---------"">States</option>")
          Do While not recordSet1.EOF
               Response.Write ("<option value="&recordSet1("CountryName")&">"&recordSet1("CountryName")&"</option>")
               recordSet1.MoveNext
          Loop
          Response.Write ("</select>")
          recordSet1.Close
          Set recordSet1 = Nothing
          Set adoCon1 = Nothing
          %>
          </td>
     </tr>
     <tr>
          <td width="25%">Zip Code</td>
          <td width="25%"><input type="text" value="" name="zipcode"></td>
     </tr>
</table>
<table id="tblCanada" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select Province<b></td>
          <td width="25%">
          <%
          Dim adoCon2
          Dim recordSet2
          Dim strSQL2
          Set adoCon2 = Server.CreateObject("ADODB.Connection")
          adoCon2.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("data.mdb")
          Set recordSet2 = Server.CreateObject("ADODB.Recordset")
          strSQL2 = "SELECT tblCountries.CountryName FROM tblCountries WHERE CountryID = 2;"
          recordSet2.Open strSQL2, adoCon2
          Response.Write ("<select name=""provinces"">")
          Response.Write ("<option value=""---------"">Provinces</option>")
          Do While not recordSet2.EOF
               Response.Write ("<option value="&recordSet2("CountryName")&">"&recordSet2("CountryName")&"</option>")
               recordSet2.MoveNext
          Loop
          Response.Write ("</select>")
          recordSet2.Close
          Set recordSet2 = Nothing
          Set adoCon2 = Nothing
          %>
          </td>
     </tr>
     <tr>
          <td width="25%">Postal Code</td>
          <td width="25%"><input type="text" value="" name="postalcode"></td>
     </tr>
</table>
<table id="tblOther" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select Country<b></td>
          <td width="25%">
          <%
          Dim adoCon3
          Dim recordSet3
          Dim strSQL3
          Set adoCon3 = Server.CreateObject("ADODB.Connection")
          adoCon3.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("data.mdb")
          Set recordSet3 = Server.CreateObject("ADODB.Recordset")
          strSQL3 = "SELECT tblCountries.CountryName FROM tblCountries WHERE CountryID = 3;"
          recordSet3.Open strSQL3, adoCon3
          Response.Write ("<select name=""others"">")
          Response.Write ("<option value=""---------"">Others</option>")
          Do While not recordSet3.EOF
               Response.Write ("<option value="&recordSet3("CountryName")&">"&recordSet3("CountryName")&"</option>")
               recordSet3.MoveNext
          Loop
          Response.Write ("</select>")
          recordSet3.Close
          Set recordSet3 = Nothing
          Set adoCon3 = Nothing
          %>
          </td>
     </tr>
     <tr>
          <td width="25%">State</td>
          <td width="25%"><input type="text" value="" name="state"></td>
     </tr>
     <tr>
          <td width="25%">Province</td>
          <td width="25%"><input type="text" value="" name="province"></td>
     </tr>
     <tr>
          <td width="25%">Region</td>
          <td width="25%"><input type="text" value="" name="region"></td>
     </tr>
</table>
</form>
</body>
</html>


to get this to work create a MS Acess Database called "Data.mdb"

you can download database here:

http://www.freewebs.com/seandelaneydownloads/data.mdb

Hope you like my work!

Ellandrd

Avatar of moonrisesystems
moonrisesystems

ASKER

Great job archrajan, thats exactlly what I was looking for.

Thanks
-Eric.
Avatar of archrajan
archrajan
U r welcome
now if u r having more than 2 radio buttons
REPLACE
<script>
if(document.frm.BannerType[0].checked)
document.frm.BannerType[0].onclick();
if(document.frm.BannerType[1].checked)
document.frm.BannerType[1].onclick()
</script>
WITH

<script>
for(i=0; i <document.frm.BannerType.length;i++)
{
if(document.frm.BannerType[i].checked)
document.frm.BannerType[i].onclick();
}
</script>