I've got some basic script which shows and hides a textarea based on the value of two radio buttons, which works fine. <script type="text/javascript"> function checkIt(el) { if (el.value == "yes") { document.getElementById('textbox').style.display = "block"; } else { document.getElementById('textbox').style.display = "none"; document.getElementById('textboxvalue').value = ''; } } </script> Code (markup): and here are my radio buttons and text area <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this);">Hide <input type="radio" name="radio" value="yes" onclick="checkIt(this);">Show <div id="textbox" style="display:none;">Textarea: <input type="text" id="textboxvalue"/></div> Code (markup): Now I want to add more radio buttons to the form which pop up another textarea. My Jscript is quite basic... how can I loop the script and add 1 to the ID to make this work? I'd rather do this than duplicate the same script over and over. Thanks.
This should do the trick: <script type="text/javascript"> function checkIt(el,boxid) { if (el.value == "yes") { document.getElementById(boxid).style.display = "block"; } else { document.getElementById(boxid).style.display = "none"; document.getElementById(boxid + 'value').value = ''; } } </script> Code (markup): <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox1');">Hide <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox1');">Show <div id="textbox1" style="display:none;">Textarea: <input type="text" id="textbox1value"/></div> <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox2');">Hide <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox2');">Show <div id="textbox2" style="display:none;">Textarea: <input type="text" id="textbox2value"/></div> <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox3');">Hide <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox3');">Show <div id="textbox3" style="display:none;">Textarea: <input type="text" id="textbox3value"/></div> Code (markup):