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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide 2 text box on radio selection

    Hii
    I have 2 radio buttons and 2 text boxes i need to show/hide them based on radio button selection.. I am totally new to javascript..pls help me

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,309
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Here you are:-

    Code:
    <form>
    Button A <input type = "radio" name = "rad1" onclick = "showBox()">
    Button B <input type = "radio" name = "rad1" onclick = "showBox()">
    <br>
    <span id = "span1" style="display:none">Textbox 1 <input type = "text" name = "textbox1"></span>
    <span id = "span2" style="display:none">Textbox 2 <input type = "text" name = "textbox2"></span>
    </form>
    
    <script type = "text/javascript">
    
    function showBox() {
    document.getElementById("span1").style.display="none";
    document.getElementById("span2").style.display="none";
    if (document.forms[0].rad1[0].checked) {
    document.getElementById("span1").style.display="block";
    }
    if (document.forms[0].rad1[1].checked) {
    document.getElementById("span2").style.display="block";
    }
    }
    
    </script>

    If it wasn't for my father, I might not be sitting here today. - Interviewee BBC Radio 4.

    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
    •