HI I was wondering if someone could help me out with a small piece of javascript.. If a number of textfields depends on two radio button with same name...like if we provide two options YES or NO (with two radio buttons) and the user clicks YES all fields acitivate accordingly otherwise become disable (if he use NO).....? I need to know how a number of textfields can depends on two radio buttons ....if the user click on the YES all fields activate and if he use to choose NO then all fields disable...? Can anyone help me out with this one? Thanks!
Not 100% sure if I understood you right, but tis should work. (Untested) <script type="text/javascript"> <!-- function toggle_fields(radio) { var fields = document.getElementsByTagName('input'); var enable = (radio.getAttribute('value') == 'yes'); for (var i = 0; i < fields.length; i++) { if (fields[i].getAttribute('type').toLowerCase() == 'text') { fields[i].setAttribute('disabled', enable); } } } //--> </script> Code (javascript): Disable all fields: <input type="radio" value="no" onclick="toggle_fields(this);" /> HTML: Enable all fields: <input type="radio" value="yes" onclick="toggle_fields(this);" /> HTML:
<html> <head> <script type="text/javascript"> function toggle_fields(radio) { var fields = document.getElementsByTagName('input'); var enable = (radio.getAttribute('value') == 'yes'); for (var i = 0; i < fields.length; i++) { if (fields[i].getAttribute('type').toLowerCase() == 'text') { fields[i].setAttribute('disabled', enable); } } } </script> </head> <body> <form name=form action="post"> If U Choose This Option:<br> <input type="radio" value="no" name="r" onclick="toggle_fields(this);" /> NO <input type="radio" value="yes" name="r" onclick="toggle_fields(this);" />Yes<br><br> <input type=text name="name1" value=";;;;;;;;;;"><br> <input type=text name="name2" value="..........."><br><br> !!!!!!!!!!!!!!!!!<br> Hows tht code goes sperately...like this?<br> !!!!!!!!!!!!!!!<br> And If U Choose THis One : <br> <input type="radio" value="no" name="r1" onclick="toggle_fields(this);" /> NO <input type="radio" value="yes" name="r1" onclick="toggle_fields(this);" />Yes<br><br> <input type=text name="name3" value=";;;;;;;;;;"><br> <input type=text name="name4" value="..........."><br><br> But Not Distrub These Fields 2 :<br> <input type=text name="name5" value=";;;;;;;;;;"><br> <input type=text name="name6" value=";;;;;;;;;;"><br> <input type=text name="name7" value=";;;;;;;;;;"><br> </form> </body> </html> Code (markup): I tried your code .....its working but how tht can achieve if I applied ur code like this ....as i coded above.....is tht possible with this code?
I modified the function slightly. <script type="text/javascript"> function toggle_fields(radio, fieldset) { var fields = document.getElementById(fieldset).getElementsByTagName('input'); var enable = (radio.getAttribute('value') == 'no'); for (var i = 0; i < fields.length; i++) { if (fields[i].getAttribute('type').toLowerCase() == 'text') { fields[i].disabled = enable; } } } </script> Code (javascript): IN order to achieve what you want to, I divided the fields into field sets, buy placing them into separate div's, each with its own ID. Example: <div id="fieldset_1"> <input type="radio" value="no" name="r" onclick="toggle_fields(this, 'fieldset_1');" /> NO <input type="radio" value="yes" name="r" onclick="toggle_fields(this, 'fieldset_1');" />Yes<br><br> <input type="text" name="name1" value=";;;;;;;;;;"><br> <input type="text" name="name2" value="..........."><br><br> </div> HTML: I also added a second argument to the function to tell it in which Div the fields are. Here's the whole code. <html> <head> <script type="text/javascript"> function toggle_fields(radio, fieldset) { var fields = document.getElementById(fieldset).getElementsByTagName('input'); var enable = (radio.getAttribute('value') == 'no'); for (var i = 0; i < fields.length; i++) { if (fields[i].getAttribute('type').toLowerCase() == 'text') { fields[i].disabled = enable; } } } </script> </head> <body> <form name="form" method="post" action=""> <div id="fieldset_1"> <input type="radio" value="no" name="r" onclick="toggle_fields(this, 'fieldset_1');" /> NO <input type="radio" value="yes" name="r" onclick="toggle_fields(this, 'fieldset_1');" />Yes<br><br> <input type="text" name="name1" value=";;;;;;;;;;"><br> <input type="text" name="name2" value="..........."><br><br> </div> <div id="fieldset_2"> <input type="radio" value="no" name="r1" onclick="toggle_fields(this, 'fieldset_2');" /> NO <input type="radio" value="yes" name="r1" onclick="toggle_fields(this, 'fieldset_2');" />Yes<br><br> <input type=text name="name3" value=";;;;;;;;;;"><br> <input type=text name="name4" value="..........."><br><br> </div> <input type=text name="name5" value=";;;;;;;;;;"><br> <input type=text name="name6" value=";;;;;;;;;;"><br> <input type=text name="name7" value=";;;;;;;;;;"><br> </form> </body> </html> HTML: