• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3503
  • Last Modified:

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

0
moonrisesystems
Asked:
moonrisesystems
  • 3
1 Solution
 
archrajanCommented:
see this example:
<!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>
<form name = "frm">
<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" onclick="ShowRow('TypeTextLinkAd');  HideRow('TypeImageAd'); HideRow('TypeHTMLAd');return true;" name="BannerType" value="TypeTextLinkAd" checked>&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" onclick="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>
</form>
<script>
if(document.frm.BannerType[0].checked)
document.frm.BannerType[0].onclick();
if(document.frm.BannerType[1].checked)
document.frm.BannerType[1].onclick();
</script>
</body>
</html>
0
 
archrajanCommented:
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
0
 
ellandrdCommented:
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

0
 
moonrisesystemsAuthor Commented:
Great job archrajan, thats exactlly what I was looking for.

Thanks
-Eric.
0
 
archrajanCommented:
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>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now