Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Button to Control Another Form Field

    Code:
    <style type="text/css"> 
    #Div2, #Div3
    { 
    display: none; 
    } 
    </style>
    <script type="text/javascript"> 
    function Toggle(theDiv) { 
    document.getElementById("Div1").style.display = "none"; 
    document.getElementById("Div2").style.display = "none"; 
    document.getElementById("Div3").style.display = "none";
    document.getElementById(theDiv).style.display = "block"; 
    } 
    </script> 
    </head>
    
    <body>
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div1');" />Turn on Div 1<br /> 
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div2');" checked />Turn on Div 2<br /> 
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div3');" />Turn on Div 3<br />
    
    
    <br /><br /> 
    
    <div id="Div1">I am the content of Div 1</div> 
    
    <div id="Div2">I am the content of Div 2</div> 
    
    <div id="Div3">I am the content of Div 3</div> 
    </body>
    I achieve what i want from the code. The problem is that i assigned a "CHECKED" on "Toggle('Div2');" which means by default, it should show "Div2" content. But what happen here is it still show "Div1" content. How to make "Div2" a default content?

    Thank you in advance for your help

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,765
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Your function does not run nor does it receive the theDiv perimeter until you click one of the boxes. Use CSS to make it visible.

    Code:
    <style type="text/css">
    #Div1, #Div3
    {
    display: none;
    }
    #Div2{
    	display: block;
    }
    </style>
    </style>
    <script type="text/javascript">
    function Toggle(theDiv) {
    document.getElementById("Div1").style.display = "none";
    document.getElementById("Div2").style.display = "none";
    document.getElementById("Div3").style.display = "none";
    document.getElementById(theDiv).style.display = "block";
    }
    </script>
    </head>
    
    <body>
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div1');" />Turn on Div 1<br />
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div2');" checked />Turn on Div 2<br />
    <input type="radio" name="ToggletheDivs" onclick="Toggle('Div3');" />Turn on Div 3<br />
    <br /><br />
    <div id="Div1">I am the content of Div 1</div>
    <div id="Div2">I am the content of Div 2</div>
    <div id="Div3">I am the content of Div 3</div>
    </body>
    Evolution - The non-random survival of random variants.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Or you could do it thus:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#choices div {
        display : none;
        position: relative;
        border: solid red 3px;
        width: 30%; height: 50px;
    }
    </style>
    </head>
    <body>
    <form id="theForm">
        <input type="radio" name="choose"> Turn on div1<br/>
        <input type="radio" name="choose" checked> Turn on div2<br/>
        <input type="radio" name="choose"> Turn on div3<br/>
    </form>
    <div id="choices">
        <div>I am the content of Div 1</div>
        <div>Too much two to do</div>
        <div>3 3 3 3 Third div</div>
    </div>
    
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var rbs = form.choose;
    for ( var r = 0; r < rbs.length; ++r )
    {
        rbs[r].onclick = choiceMade;
    }
    function choiceMade( )
    {
        var divs = document.getElementById("choices").getElementsByTagName("div");
        for ( var r = 0; r < rbs.length; ++r )
        {
            divs[r].style.display = rbs[r].checked ? "block" : "none";
        }
    }
    // get things started:
    choiceMade();
    </script>
    </body>
    </html>
    Advantage: You can have as many divs and radio buttons as you want, and you (a) don't have to add id's to the divs, (b) don't have to add calls to the toggle function to the radio buttons manually.

    Whether that's a true advantage or not, you decide.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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