How to create this Javascript form?

[ladan]

I want to create a form on my website that has 3 radio buttons and when someone clicks on each radio button, a different text paragraph appears.

I tried to find such a script by searching in Google but they all were just ordinary web forms.

So do you know how I can do this using Javascript?

Thanks,

[Arenlor]

http://www.v7n.com/forums/coding-for...l-i-swear.html
Just change it so that the radio set uses that on change, or maybe the form itself does. I'm not great at JS but that should get you somewhere with it.

[ladan]

Thank you, but it's quite different from what I need. I know the code must have something to do with <div> tag.

Any ideas how to create a form that hides and shows a <div> tag on choosing different options?

[Gannyaa]

Laden, I hope this helps you...

Put this javascript into the head of your html

<script type="text/javascript">
function ShowDiv(divName) {
HideDivs();
if (document.all) { 
document.all.text1.style.visibility = "visible";
} else {
document.getElementById(divName).style.visibility = "visible"; }
}

function HideDivs() {
if (document.all) { 
document.all.text1.style.visibility = "hidden";
document.all.text2.style.visibility = "hidden";					document.all.text3.style.visibility = "hidden";
} else {
document.getElementById('text1').style.visibility = "hidden";
document.getElementById('text2').style.visibility = "hidden";
document.getElementById('text3').style.visibility = "hidden"; }
}
</script>

The rest you put into the body of the html

<form name="form1" method="post" action="">
	<input type="radio" onChange="ShowDiv('text1')" name="radiobutton" value="radiobutton" checked> text 1
	<input type="radio" onChange="ShowDiv('text2')" name="radiobutton" value="radiobutton"> text 2
	<input type="radio" onChange="ShowDiv('text3')" name="radiobutton" value="radiobutton"> text 3
</form>
<br />
<div id="text containter" style='width:420; height:85px; background:silver; position: absolute; '>

<div id='text1' style="position:absolute; left:5px; top:10px">
<font color='#0000FF'>I want to create a form on my website that has 3 radio buttons </font>
</div>

<div id='text2' style='position:absolute; left:5px; top:10px; visibility:hidden;'>
<font color='#0000FF'>and when someone clicks on each radio button, a different text paragraph appears.</font>
</div>

<div id='text3' style='position:absolute; left:5px; top:10px; visibility:hidden;'>
<font color='#0000FF'>So do you know how I can do this using Javascript?</font>
</div>

</div>

I hope you know a little about programming. With this you can easily customize it.

I have put up a demo page with this in action at
http://haidavision.no-ip.info/gannya...s/showhide.htm

[ladan]

Thank you very much Todd! I'll try it on my website.

[Gannyaa]

Er. Again I noticed that my code didn't work properly with IE5.
So I retested and reposted. The difference is instead of onChange=
I now use onClick=
This solves the IE5 problem and still works with every other w3dom browser.
I made the changes to the page with the answer.

http://haidavision.no-ip.info/gannya...s/showhide.htm

Later

[Blackpool]

Todds code is spot on, I used this javascript form code and it works wonders.