SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make text box appear when radio is checked

    Hi everyone. I need some javascript help.

    I have a form with 3 radios. As I click a radio, a text box must appear below it. Only one text box must appear at a time depending on the radio selected.

    Any help will be greatly appreaciated.

    Regards
    Anwar

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    function show() {
    
    for(var i=1; i< 4; i++ ) {
    (document.getElementById('radio'+i).checked) ? document.getElementById('text'+i).style.display="block" : document.getElementById('text'+i).style.display="none"
    
    }
    }
    </script>
    
    <style type="text/css">
    .anwaraa {display:none; }
    </style>
    
    
    </script>
    
    <form>
    <input type="radio" id="radio1" name="radio1" onclick="show()"><br>
    <input type="text" id="text1" class="anwaraa" value="111" class><br>
    
    <input type="radio" id="radio2" name="radio1" onclick="show()"><br>
    <input type="text" id="text2" class="anwaraa" value="222" ><br>
    
    <input type="radio" id="radio3" name="radio1" onclick="show()"><br>
    
    <input type="text" id="text3" class="anwaraa" value="333" ><br>
    
    </form>
    with while loop:
    Code:
     
    <script type="text/javascript">
    
    function show() {
    var i = 0;
    var el;
    while(el = document.getElementsByName("radio1")[i++] ) {
    // alert(i);
    (document.getElementById('radio'+i).checked) ? document.getElementById('text'+i).style.display="block" : document.getElementById('text'+i).style.display="none"
    
    }
    }
    </script>
    
    <style type="text/css">
    .anwaraa {display:none; }
    </style>
    
    
    </script>
    
    <form>
    <input type="radio" id="radio1" name="radio1" onclick="show()"><br>
    <input type="text" id="text1" class="anwaraa" value="111" class><br>
    
    <input type="radio" id="radio2" name="radio1" onclick="show()"><br>
    <input type="text" id="text2" class="anwaraa" value="222" ><br>
    
    <input type="radio" id="radio3" name="radio1" onclick="show()"><br>
    
    <input type="text" id="text3" class="anwaraa" value="333" ><br>
    
    </form>
    Last edited by muazzez; Apr 6, 2007 at 07:08.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much muazzez. It works perfectly.

    Regards
    Anwaraa


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
  •