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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    69
    Thanks
    6
    Thanked 0 Times in 0 Posts

    show and hide onclick radio buttons

    Hi,

    I have 4 radio buttons with separate div(s)

    I need to click on each radio button to show particular div(s) but I am not getting correct result Lease help

    HTML Code
    ----------

    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="1" onClick=\"get_radio_value(1);\" >

    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="2" onClick=\"get_radio_value(2);\" >

    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="3" onClick=\"get_radio_value(3);\" >

    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="4" onClick=\"get_radio_value(4);\" >

    <div id="div1" style="display:none">
    Facilities Management
    </div>

    <div id="div2" style="display:none">
    <div style="font-weight:bold">Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
    </div>

    <div id="div3" style="background-color:#00B0F0;display:none">
    Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
    </div>

    <div id="div4" style="background-color:#00B0F0;display:none">
    Facilities Management,Contracting, MEP, Hydraulic Valves, Plumping, LV Switching, Fire alarm & Fire Fighting Trading etc…
    </div>

    JSCode
    --------
    function toggleLayer(val)
    {
    if(val == 1)
    {
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
    document.getElementById('div4').style.display = 'none';
    }

    else if(val == 2)
    {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
    document.getElementById('div3').style.display = 'none';
    document.getElementById('div4').style.display = 'none';
    }

    else if(val == 3)
    {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'block';
    document.getElementById('div4').style.display = 'none';
    }

    else if(val == 4)
    {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
    document.getElementById('div4').style.display = 'block';
    }
    }
    Last edited by shajiuddin; 04-14-2012 at 09:33 AM. Reason: detail

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Well, one reason why it does not work is that you have no function get_radio_value();

    Code:
    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="1" onClick="get_radio_value('div1');" >
    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="2" onClick="get_radio_value('div2');" >
    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="3" onClick="get_radio_value('div3');" >
    <input type="radio" name="list_prefer_c" id="list_prefer_c" value="4" onClick="get_radio_value('div4');" >
    
    <div id="div1" style="display:none">
    Facilities Management
    </div>
    
    <div id="div2" style="display:none" style="font-weight:bold">Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc?
    </div>
    
    <div id="div3" style="background-color:#00B0F0; display:none">
    Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc?
    </div>
    
    <div id="div4" style="background-color:#00B0F0;display:none">
    Facilities Management,Contracting, MEP, Hydraulic Valves, Plumping, LV Switching, Fire alarm & Fire Fighting Trading etc?
    </div>
    
    <script type = "text/javascript">
    
    function get_radio_value(which) {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
    document.getElementById('div4').style.display = 'none';
    document.getElementById(which).style.display = 'block';
    }
    
    
    </script>


    Q: How do you keep an idiot in suspense?
    A: I'll tell you later

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    69
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi Philip,

    Thanks for help

    But when I clicked on 2nd radio button then div 1,3,4 should hide

    same action for all radio buttons

    Please help

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by shajiuddin View Post
    Hi Philip,

    Thanks for help

    But when I clicked on 2nd radio button then div 1,3,4 should hide

    same action for all radio buttons

    Please help
    I don't understand. Have you actually tried the script? The script hides all divs except the one asscociated with the specific radio button. Is that not what you want?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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