SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Apr 5, 2007, 12:04 #1
- 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
-
Apr 5, 2007, 14:05 #2
- 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>
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.
-
Apr 8, 2007, 14:22 #3
- 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