New content upon radio button click?

**dynamitedave** · 02-05-2007, 10:11 PM

I’m making a form and I need it to display information once someone has clicked on a radio button. Beasically someone clicks “I accept” the terms then more information is dropped down.

Such as this page. Click on “I accept”
http://www.customfitnessconcepts.com...nditioning.php

I need to know how to do this but I need more help than just “use a <div> or <iframe>

Any ideas? I am building this site in DotNetNuke (dotnetnuke.com) and I’m using the module XMOD to build the forms.

So anyone have any ideas?

Thanks a lot.

**Bob90** · 02-07-2007, 03:27 AM

Here is a working example

Insert into the body

Code:

TEXT BEFORE BLOCK<br>


<input type="radio" id="accept" onclick="document.getElementById('dropdown').style.display = 'block', document.getElementById('decline').checked = 0"> I ACCEPT<br>
<input type="radio" id="decline" onclick="document.getElementById('dropdown').style.display = 'none',document.getElementById('accept').checked = 0"> I DECLINE<br>


<div id="dropdown" style="display:none">
	WOW you accept. <br>
	Quick lets take his money
	
</div>

<br>
TEXT AFTER BLOCK

**codeexploiter** · 02-07-2007, 04:14 AM

Yes using Bob90's method you can achieve what you are looking for.

You will enter all the content you want in your page but will hide the unnecessary items in the page you mentioned in your posting they've made invisible a block which they've created using DIV with a unique ID. Within the DIV they've placed the 'What day would you like to start? (3 drop down menus)', '*Select your Site: (1 drop down menu)' and '*Choose your Plan: (3 radio buttons)'.

So whenever the page loads all these content loads along with the page but not displaying as they are hidden.

Now the user clicks on the I Accept radio button then in the onclick event of I Accept radio button we get the DIV element which is hidden using its unique ID and make that visible using the following code.

Code:

document.getElementById("dropdown").style.display = "block";

If the user clicks on I Decline we hide the DIV block (along with its contents) using the following code

Code:

document.getElementById("dropdown").style.display = "none";

**jscheuer1** · 02-07-2007, 05:46 AM

This really is more suited to a checkbox but, this seems to work out well:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
onload=function(){
document.getElementById('accept').checked=false;
}

</script></head>
<body>
TEXT BEFORE BLOCK<br>


<input type="radio" id="accept" onclick="this.ticked=this.ticked? 0 : 1; document.getElementById('dropdown').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;"> I ACCEPT<br>

<div id="dropdown" style="display:none">
	WOW you accept. <br>
	Quick lets take his money
	
</div>

<br>
TEXT AFTER BLOCK
</body>
</html>

If it is for anything important, a server side solution should be found.

Thread: New content upon radio button click?

Thread Tools

Search Thread

New content upon radio button click?

Quick n Dirty

Bookmarks

Bookmarks

Posting Permissions