Lithium Posted May 20, 2009 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
CrazyT Posted May 22, 2009 Posted May 22, 2009 Re: Radio buttons and enabling textfields Im not sure, i think javascript will do that for you.. Quote
BlueDevil23 Posted May 24, 2009 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
Lithium Posted May 24, 2009 Author Posted May 24, 2009 Re: Radio buttons and enabling textfields hmmm, will try to work from here, thx for the tips :) Quote
BlueDevil23 Posted May 24, 2009 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
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.