Lithium Posted May 20, 2009 Share Posted May 20, 2009 Having a few radio buttons and let's say 2 textfields (both disabled), how can i do to enable one or other textfields, depending on the radio button that is selected? Quote Link to comment Share on other sites More sharing options...
CrazyT Posted May 22, 2009 Share Posted May 22, 2009 Re: Radio buttons and enabling textfields Im not sure, i think javascript will do that for you.. Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted May 24, 2009 Share Posted May 24, 2009 Re: Radio buttons and enabling textfields The basic idea is to create a JS function, and fire it, when a radio button is clicked. Also, you want to think about the people with JS turned off, so create a function, and add it into your <head>, and then insert it into the <body> tag. All this function will do is disable the inputs onload, instead of doing it straight in the <input /> tag, so if the user does have JS disabled, they are still able to access the fields, since they'll never be disabled in the first place. <head> <script type="text/javascript"> function disableInputs() { document.someForm.inputUno.disabled = true; document.someForm.inputDos.disabled = true; } </script> </head> <body onload="disableInputs()"> <form action="example.php" method="POST" name="someForm"> [list=1] [*] <label for="radioUno"> Radio 1 </label> <input type="radio" name='radios' id="radioUno" onclick="enableInput(form)" value="one" /> [*] <label for="radioDos"> Radio 2 </label> <input type="radio" name='radios' id="radioDos" onclick="enableInput(form)" value="two" /> [*] <label for="inputUno"> Input 1 </label> <input type="text" id="inputUno" name="inputUno" /> [*] <label for="inputDos"> Input 2 </label> <input type="text" id="inputDos" name="inputDos" /> [*] <input type="submit" value="Example" /> [/list] </form> </fieldset> </div> <script type='text/javascript'> function enableInput(obj) { if(obj.radios[0].checked==true) { obj.inputUno.disabled = false; obj.inputUno.focus(); obj.inputDos.disabled = true; } if(obj.radios[1].checked==true) { obj.inputDos.disabled = false; obj.inputDos.focus(); obj.inputUno.disabled = true; } } </script> ... Not sure why I used the [ php] tags lol, but it gives some level of syntax highlighting. Oh, and I might add, JS is very hard to get X-Browser compatibility with, so you might want to consider using a JS lib. ie: I use the Dojo Toolkit, so instead of obj.radios[0].checked==true; I could change that to something like dojo.attr(dojo.query('[name="radioUno"]')[0], 'selected') for more X-Browser compatibility. This is a working example, and you should be able to just plug it straight in, with minor changes :) Quote Link to comment Share on other sites More sharing options...
Lithium Posted May 24, 2009 Author Share Posted May 24, 2009 Re: Radio buttons and enabling textfields hmmm, will try to work from here, thx for the tips :) Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted May 24, 2009 Share Posted May 24, 2009 Re: Radio buttons and enabling textfields Example site up (thanks to Killah for hosting it) http://deadlyhustle.net/test2.php Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.