By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,854 Members | 869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,854 IT Pros & Developers. It's quick & easy.

Hide table using radio button

P: n/a
I have a table thats wrapped in a div tag, that when user selects 1 of 2
radio buttons it hides or shows table, this works ok.
But I want to set the table show hide on what the existing state of radio
buttons are on page load aswell, so if one button is allready selected then
the table is hidden else it is shown, can some help me with this,
Existing code below Regards Don.
'****************
<html>
<head>
</head>

<body>

<form method="POST" action="userinsert.asp" name="Form1">
<table border="0">
<tr>
<td nowrap class="labelheader">Purchase Type:</td>
<td nowrap class="labelheader" valign="middle">Use Credit Card: <input
type="radio" value="0" onfocus="showpurchase('purchasing');return true;"
name="chargetype">&nbsp;</td>
<td nowrap class="labelheader" valign="middle">Use Purchase Orders:
<input type="radio" name="chargetype" value="1"
onfocus="hidepurchase('purchasing');return false;" checked></td>
</tr>
</table>
<div id="purchasing" class="options" style="display: block; width: 377;
height: 26">
<table id="MyTable" border="0" width="39%">
<tr>
<td nowrap class="labelheader">This line should hide if Purchase
Order Selected</td>
</tr>
</table>
</div>
<table border="0" width="39%">
<tr>
<td width="39%" nowrap colspan="3"><input type="submit" value="Save
Details" name="btnSave" class="cmdflat" tabindex="24">
<input type="reset" value="Reset" name="B2" class="cmdflat"
tabindex="25"></td>
<td width="63%" nowrap class="labelheader">&nbsp;&nbsp; <b>Required
Fields (*)</b></td>
</tr>
</table>
</form>
<script type="text/JavaScript">
<!--
function showpurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
}
//-->

<!--
function hidepurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
//-->
</script>

</body>

</html>

'****************
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"Don Grover" <sp******@assoft.com.au> wrote in message
news:c5***********@otis.netspace.net.au...
I have a table thats wrapped in a div tag, that when user selects 1 of 2
radio buttons it hides or shows table, this works ok.
But I want to set the table show hide on what the existing state of radio
buttons are on page load aswell, so if one button is allready selected then the table is hidden else it is shown, can some help me with this,
Existing code below Regards Don.
'****************
<html>
<head>
</head>

<body>

<form method="POST" action="userinsert.asp" name="Form1">
<table border="0">
<tr>
<td nowrap class="labelheader">Purchase Type:</td>
<td nowrap class="labelheader" valign="middle">Use Credit Card: <input type="radio" value="0" onfocus="showpurchase('purchasing');return true;"
name="chargetype">&nbsp;</td>
<td nowrap class="labelheader" valign="middle">Use Purchase Orders:
<input type="radio" name="chargetype" value="1"
onfocus="hidepurchase('purchasing');return false;" checked></td>
</tr>
</table>
<div id="purchasing" class="options" style="display: block; width: 377;
height: 26">
<table id="MyTable" border="0" width="39%">
<tr>
<td nowrap class="labelheader">This line should hide if Purchase
Order Selected</td>
</tr>
</table>
</div>
<table border="0" width="39%">
<tr>
<td width="39%" nowrap colspan="3"><input type="submit" value="Save
Details" name="btnSave" class="cmdflat" tabindex="24">
<input type="reset" value="Reset" name="B2" class="cmdflat"
tabindex="25"></td>
<td width="63%" nowrap class="labelheader">&nbsp;&nbsp; <b>Required
Fields (*)</b></td>
</tr>
</table>
</form>
<script type="text/JavaScript">
<!--
function showpurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
}
//-->

<!--
function hidepurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
//-->
</script>

</body>

</html>

'****************


<html>
<head>
</head>

<body onload="setVisibility()">

<form method="POST" action="userinsert.asp" name="Form1">
<table border="0">
<tr>
<td nowrap class="labelheader">Purchase Type:</td>
<td nowrap class="labelheader" valign="middle">Use Credit Card: <input
type="radio" value="0" onfocus="showpurchase('purchasing');return true;"
name="chargetype">&nbsp;</td>
<td nowrap class="labelheader" valign="middle">Use Purchase Orders:
<input type="radio" name="chargetype" id="radioPurchase"
onfocus="hidepurchase('purchasing');return false;" checked></td>
</tr>
</table>
<div id="purchasing" class="options" style="display: block; width: 377;
height: 26">
<table id="MyTable" border="0" width="39%">
<tr>
<td nowrap class="labelheader">This line should hide if Purchase
Order Selected</td>
</tr>
</table>
</div>
<table border="0" width="39%">
<tr>
<td width="39%" nowrap colspan="3"><input type="submit" value="Save
Details" name="btnSave" class="cmdflat" tabindex="24">
<input type="reset" value="Reset" name="B2" class="cmdflat"
tabindex="25"></td>
<td width="63%" nowrap class="labelheader">&nbsp;&nbsp; <b>Required
Fields (*)</b></td>
</tr>
</table>
</form>
<script type="text/JavaScript">
<!--
function setVisibility()
{
var MyRadio = document.getElementById("radioPurchase")
MyRadio.value="1";
hidepurchase('purchasing');
}

function showpurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
}

function hidepurchase(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
//-->
</script>

</body>

</html>
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.