...

View Full Version : Help with hiding div tags based on radio selection



bowlinbd
08-20-2008, 03:54 PM
I am new to JavaScript and realize that I'm probably just missing something simple. I have two radio buttons and I want a a certain div tag to display based on which button is selected. I've cut out the extra coding and made a very basic example of what I'm trying to do. If you could be of any help I would greatly appreciate it.

The error that I'm getting is stating that "document.form.techspecsub" is either null or not an object.




<script type="text/javascript">

function showhide_areabldgreq()
{
if (document.form.techspecsub[0].checked)
{
document.getElementById("areabldg").style.display = "inline";
}
else
{
document.getElementById("areabldg").style.display = "none";
}

if (document.form.techspecsub[1].checked)
{
document.getElementById("reqpo").style.display = "inline";
}
else
{
document.getElementById("reqpo").style.display = "none";
}
}

</script>



<form>
<input name="techspecsub" value="Enter Area" type="radio"
onClick="showhide_areabldgreq()" />Enter Area<br>

<input name="techspecsub" value="Enter Requisition" type="radio"
onClick="showhide_areabldgreq()" />Enter Requisition
</form>

<div id="areabldg" style="display:none">I'm Area</div><br>
<div id="reqpo" style="display:none">I'm Req PO</div>

rangana
08-20-2008, 04:05 PM
Add highlighted:


if (document.forms[0].techspecsub[0].checked)
{
document.getElementById("areabldg").style.display = "inline";
}
else
{
document.getElementById("areabldg").style.display = "none";
}

if (document.forms[0].techspecsub[1].checked)
{
document.getElementById("reqpo").style.display = "inline";
}
else
{
document.getElementById("reqpo").style.display = "none";
}


Hope that helps.

uncrocks
08-20-2008, 04:06 PM
Set the radio buttons to have values and change one of their names...

<input type="radio" value="YOURVALUE" name="techspecsub"><input type="radio" value="YOURVALUE" name="techspecsubb">
Then change Your javascript to check for the value...

<script type="text/javascript">

function showhide_areabldgreq()
{
if (document.form.techspecsub.value="YOURVALUE")
{
document.getElementById("areabldg").style.display = "inline";
}
else
{
document.getElementById("areabldg").style.display = "none";
}

if (document.form.techspecsubb.value="YOURVALUE")
{
document.getElementById("reqpo").style.display = "inline";
}
else
{
document.getElementById("reqpo").style.display = "none";
}
}

</script>
That Should Work:thumbsup:

bowlinbd
08-20-2008, 04:22 PM
Both solutions worked perfectly. Thank you very much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum