...

View Full Version : 2 radiobuttons. Onchange hide/display content



critz
07-12-2012, 04:29 PM
Hi guys, I cant figure this out on my own. help is very appreciated.
sorry for my bad english

These are my 2 radiobuttons

<tr>
<td><input type="radio" name="privateorpublic" id="privateorpublic" value="Private" checked>Private</td>
<td><input type="radio" name="privateorpublic" id="privateorpublic" value="Public" >Public</td>
</tr>

radiobutton Private is set to checked and I'm trying to display these 3 table rows when public is selected. Then hide them again when they select private again. So I was trying some stuff using onclick="togglefunction()"

this is my toughtprocess

if radiobtn value public is selected (show tablerows with classname="hide")
else (hide tablerows with classname "hide")

css:

.hide {
display: none;}


<tr class="hide">
<td><label for="companyname">Companyname:</label></td>
<td><input type="text" name="companyname" id="companyname"</td>
</tr>
<tr class="hide">
<td><label for="adress">Adress:</label></td>
<td><input type="text" name="adress" id="adress"</td>
</tr>
<tr class="hide">
<td><label for="BTWnr">BTW number:</label></td>
<td><input type="text" name="BTWnr" id="BTWnr"</td>
</tr>

any1 can set me on my way? thank you very much

jmrker
07-12-2012, 04:51 PM
Consider these changes ...


<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">

</script>
<style type="text/css">
.hide { display:none;}
</style>

</head>
<body>
<table>
<tr>
<td><input type="radio" name="privateorpublic" value="Private" checked
onclick="document.getElementById('tblInfo').style.display='none'">Private
</td>
<td><input type="radio" name="privateorpublic" value="Public"
onclick="document.getElementById('tblInfo').style.display='block'">Public
</td>
</tr>
</table>

<table id="tblInfo" class="hide">
<tr>
<td><label for="companyname">Companyname:</label></td>
<td><input type="text" name="companyname" id="companyname"</td>
</tr>
<tr>
<td><label for="adress">Adress:</label></td>
<td><input type="text" name="adress" id="adress"</td>
</tr>
<tr>
<td><label for="BTWnr">BTW number:</label></td>
<td><input type="text" name="BTWnr" id="BTWnr"</td>
</tr>
</table>

</body>
</html>

NOTE: id values must be unique. You can not use the same ID for both radio buttons.

Good Luck!
:)

DrDOS
07-12-2012, 05:30 PM
Well for starters, name is not the same as className, className only applies if you assign a class.
Put this in the input tags: onchange="changechecked(n);"
where n = 0 for the first input and 1 for the second.


var ins = window.document.getElementsByName("privatepublic");
function changechecked(N)
{
// Then put your conditional statements in here
}
ins[0].checked = true; // Makes the first input checked onload.

That should work.

critz
07-12-2012, 08:10 PM
thank you guys!

critz
07-13-2012, 10:20 AM
it works fine now, thanks again.
The only little bug is that when public is selected and the tblInfo shows, when I refresh the page, public stays selected and the tblInfo doesnt show.

Is there somthing i can do like onload()? select radiobtn private

jmrker
07-13-2012, 03:06 PM
it works fine now, thanks again.
The only little bug is that when public is selected and the tblInfo shows, when I refresh the page, public stays selected and the tblInfo doesnt show.

Is there somthing i can do like onload()? select radiobtn private
:confused:
What version is the final code you are using that is giving you problems?

critz
07-13-2012, 03:18 PM
Select public and then refresh the page



<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">

</script>
<style type="text/css">
.hide { display:none;}
</style>

</head>
<body>
<table>
<tr>
<td><input type="radio" name="privateorpublic" id="private" value="Private" checked
onclick="document.getElementById('tblInfo').style.display='none'">Private
</td>
<td><input type="radio" name="privateorpublic" id="public "value="Public"
onclick="document.getElementById('tblInfo').style.display='block'">Public
</td>
</tr>
</table>

<table id="tblInfo" class="hide">
<tr>
<td><label for="companyname">Companyname:</label></td>
<td><input type="text" name="companyname" id="companyname"</td>
</tr>
<tr>
<td><label for="adress">Adress:</label></td>
<td><input type="text" name="adress" id="adress"</td>
</tr>
<tr>
<td><label for="BTWnr">BTW number:</label></td>
<td><input type="text" name="BTWnr" id="BTWnr"</td>
</tr>
</table>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum