Results 1 to 4 of 4

Thread: New content upon radio button click?

  1. #1
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default New content upon radio button click?

    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.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default Quick n Dirty

    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

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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";

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •