LearningKid Posted February 15, 2010 Share Posted February 15, 2010 hey can anyone show me how to make 2 radio with 2 dropdown menu so if u select one radio button u will get to select one dropdown and if u select the other u get the other dropdown. however if u change one drop down and decide to choose the other one when u click the other one the 1st one resets so u dont get 2 values sent. Hlp Plz Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 15, 2010 Share Posted February 15, 2010 You don't necessarily need to reset a select list if the user chooses to use the other list. Any fieds that are disabled do not post their values. So, you could do something as simple as this: <html> <head> <script type="text/javascript"> function chooseSelect(selectOption) { document.getElementById('select1').disabled = (selectOption!=1); document.getElementById('select2').disabled = (selectOption!=2); } </script> </head> <body> <form action="" method="post"> Select 1 (Letters) <input type="radio" name="selectOpt" value="1" onclick="chooseSelect(this.value);" /><br /> Select 2 (Numbers) <input type="radio" name="selectOpt" value="2" onclick="chooseSelect(this.value);" /><br /> <select name="select1" id="select1" disabled="disabled"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select><br /> <select name="select2" id="select2" disabled="disabled"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select><br /> <br /> <button type="submit">Submit</button> </form> </body> </html> However, if you want to reset the unselected list for aesthetic reasons, I would do this: <html> <head> <script type="text/javascript"> function chooseSelect(selectOption) { select1Obj = document.getElementById('select1'); select2Obj = document.getElementById('select2'); select1Obj.disabled = (selectOption!=1); select1Obj.selectedIndex = (selectOption!=1) ? 0 : select1Obj.selectedIndex; select2Obj.disabled = (selectOption!=2); select2Obj.selectedIndex = (selectOption!=2) ? 0 : select2Obj.selectedIndex; } </script> </head> <body> <form action="" method="post"> Select 1 (Letters) <input type="radio" name="selectOpt" value="1" onclick="chooseSelect(this.value);" /><br /> Select 2 (Numbers) <input type="radio" name="selectOpt" value="2" onclick="chooseSelect(this.value);" /><br /> <select name="select1" id="select1" disabled="disabled"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select><br /> <select name="select2" id="select2" disabled="disabled"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select><br /> <br /> <button type="submit">Submit</button> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
LearningKid Posted February 16, 2010 Author Share Posted February 16, 2010 Hey Thank you. 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.