smerny Posted July 14, 2010 Share Posted July 14, 2010 I have radio buttons... <input type='radio' name='type' value='normal' selected /> Normal<br /> <input type='radio' name='type' value='progress' /> Progress and I would like to make it so that if "normal" is selected, the following is shown next: <select name='score'> <option value='0'></option> <option value='1'>NI (Needs Improvement)</option> <option value='2'>SC -</option> <option value='3'>SC (Successful Contributor)</option> <option value='4'>SC +</option> <option value='5'>EC (Exceptional Contributor</option> </select> but if "progress" is selected, this is shown instead: <select name='score'> <option value='0'></option> <option value='1'>UP (Unacceptable Progress)</option> <option value='3'>SP (Satisfactory Progress)</option> <option value='5'>OP (Outstanding Progress)</option> </select> I know this can be done using JavaScript, and I have looked a little bit for examples online but couldn't find one that fit this really. Thanks for any help provided. Link to comment https://forums.phpfreaks.com/topic/207751-changing-form-based-on-radio-button-clicked/ Share on other sites More sharing options...
joePHP Posted July 14, 2010 Share Posted July 14, 2010 Hi, Try this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> #score_progress, #score_normal { display: none; } </style> <script type="text/javascript"> window.onload = displaySelect; function displaySelect(objID) { switch(objID) { case 'normal': document.getElementById('score_progress').style.display = 'none'; document.getElementById('score_normal').style.display = 'block'; break; case 'progress': document.getElementById('score_normal').style.display = 'none'; document.getElementById('score_progress').style.display = 'block'; break; default: document.getElementById('score_normal').style.display = 'none'; document.getElementById('score_progress').style.display = 'none'; document.getElementById('normal').checked = false; document.getElementById('progress').checked = false; } } </script> <title>Webpage Title</title> </head> <body> <div id="main"> <form action="" method="post"> <input type='radio' name='type' value='normal' id='normal' onclick='displaySelect(this.id);' /> Normal<br /> <input type='radio' name='type' value='progress' id='progress' onclick='displaySelect(this.id);' /> Progress<br /> <select name='score_normal' id='score_normal'> <option value='0'></option> <option value='1'>NI (Needs Improvement)</option> <option value='2'>SC -</option> <option value='3'>SC (Successful Contributor)</option> <option value='4'>SC +</option> <option value='5'>EC (Exceptional Contributor</option> </select> <select name='score_progress' id='score_progress'> <option value='0'></option> <option value='1'>UP (Unacceptable Progress)</option> <option value='3'>SP (Satisfactory Progress)</option> <option value='5'>OP (Outstanding Progress)</option> </select> </form> </div> </body> </html> I hope this helps, Joe Link to comment https://forums.phpfreaks.com/topic/207751-changing-form-based-on-radio-button-clicked/#findComment-1086119 Share on other sites More sharing options...
smerny Posted July 14, 2010 Author Share Posted July 14, 2010 yep, thanks Link to comment https://forums.phpfreaks.com/topic/207751-changing-form-based-on-radio-button-clicked/#findComment-1086129 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.