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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Disable Radio Button

    Hello Friends,
    i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content.
    Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable.
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css" media="screen">
    .hide{
    display:none;
    }
    </style>
    </head>
    <body>

    <div id="tabs">
    <div id="nav">
    <p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p>
    <p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p>
    <p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p>
    <p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p>
    </div>

    <div id="div1" class="tab">
    <p>this is div 1</p>
    </div>

    <div id="div2" class="tab">
    <p>this is div 2</p>
    </div>

    <div id="div3" class="tab">
    <p>this is div 3</p>
    </div>

    <div id="div4" class="tab">
    <p>this is div 4</p>
    </div>
    </div>

    <script type="text/javascript" charset="utf-8">
    (function(){
    var tabs =document.getElementById('tabs');
    var nav = tabs.getElementsByTagName('input');

    /*
    * Hide all tabs
    */
    function hideTabs(){
    var tab = tabs.getElementsByTagName('div');
    for(var i=0;i<=nav.length;i++){
    if(tab[i].className == 'tab'){
    tab[i].className = tab[i].className + ' hide';
    }
    }
    }

    /*
    * Show the clicked tab
    */
    function showTab(tab){
    document.getElementById(tab).className = 'tab'
    }

    hideTabs(); /* hide tabs on load */

    /*
    * Add click events
    */
    for(var i=0;i<nav.length;i++){
    nav[i].onclick = function(){
    hideTabs();
    showTab(this.className);
    }
    }
    })();
    </script>
    </body>
    </html>


    Thank you for your help in advance.
    Last edited by skumar_96; 10-21-2011 at 02:50 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You do realize that if you disable the other 3 radio buttons then there will be *NO WAY* for the user to change his/her mind and ask to see a different tab than the one first chosen? In other words, if the use accidentally picks the wrong button, his totally screwed.

    I think that's very bad human interface design. Are you *SURE* you want to do that??
    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.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That exactly what i want, actually i am running a promotion in which a user has to choose an option which contains a surprise so a single user can only select one surprise.

    Thanks

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    will it be that surprising if they look at the source code first?

    just curious...

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yeah, anybody with 80% of a brain will do a VIEW==>>SOURCE, look at your code, and know immediately which button to press.

    And even if someone only has 50% of a brain, he/she will just hit REFRESH and choose another button if he/she doesn't like their choice.

    Unless this is a page for those with 49% of a brain or less, you should do this code SERVER-side, with PHP or some such coding, so the user *can't* see the answer.

    Of course, you would then need to have some kind of login system to ensure, again, that the person can't hit BACK in their browser and try another button. Even those with 25% of a brain might figure that one out.
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Anyway, here is the SIMPLEST answer to your question:
    Code:
    for(var i=0;i<nav.length;i++){
        nav[i].onclick = function(){
            hideTabs();
            showTab(this.className);
            document.getElementById("nav").style.visibility = "hidden";
       }
    }
    That will simply hide all the buttons, so there's no way to click on any of them again.

    Unless you hit REFRESH. But, again, that requires 50% of a brain.
    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.

  • Users who have thanked Old Pedant for this post:

    skumar_96 (10-21-2011)

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for the solution, one more favor, can you embed the function the page i.e. the page/script i posted and make it complete.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by skumar_96 View Post
    Thank you for the solution, one more favor, can you embed the function the page i.e. the page/script i posted and make it complete.
    You should TRY to embed it yourself!
    It is a lot easier to correct your mistakes when you make them yourself.

    If you rely on others to do things, you will never learn to do it by yourself.

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I embedded myself, i know it was a silly question to ask. Can i have a option to disable the radio buttons instead of hiding them, what i mean i when a radio button is selected can the other other radio buttons be disabled instead of hidden?

    Thank you all.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    See post #2.

    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.

  • #11
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    What is post#2

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by skumar_96 View Post
    What is post#2
    Post # 2 in this thread by Old Pedant
    If you ask for help and advice in this forum you ought to follow that advice.
    Last edited by Philip M; 10-21-2011 at 07:24 PM.

    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.

  • #13
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK Philip, sorry about that.
    Thank you Old Pendant for your help and i know what i am doing, i am going to embed this script inside a PHP page and i can't describe the entire project here and that is why i kept it short. I am perfectly aware of the advices given to me and i strictly trying to follow them and also aware of the rules and regulations of the forum.

    THANK YOU ALL FOR YOUR HELP AND SPECIAL THANKS TO OLD PENDANT.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, if you really want to do the disable instead of hide...

    Change this function:
    Code:
    function showTab(tab){
        document.getElementById(tab).className = 'tab'
    }
    to this:
    Code:
    function showTab(tab){
        document.getElementById(tab).className = 'tab'
        for ( var n = 0; n < nav.length; ++n )
        {
            nav[n].disabled = true;
        }
    }
    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.

  • #15
    New Coder
    Join Date
    Sep 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello old Pendant,
    it's not working, instead of disabling the radio buttons, it is hiding them


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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