469,649 Members | 1,169 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,649 developers. It's quick & easy.

Hide table using radio button

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
1 11448
"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.

Similar topics

3 posts views Thread by Owen Funkhouser | last post: by
10 posts views Thread by DettCom | last post: by
2 posts views Thread by MOHSEN KASHANI | last post: by
11 posts views Thread by C.W.Holeman II | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.