powpow Posted March 17, 2011 Share Posted March 17, 2011 The following code displays one div tag when the checkbox is checked. In the now visible div tag is a submit button (in the future there will be a form). The user cannont uncheck the the checkbox until the submit button has been clicked. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>New document</title> <script type="text/javascript"> function reveal_reply(){ if(document.getElementById('thebox').checked){ document.getElementById('display_reply').style.display = "block"; document.getElementById('thebox').disabled=true; } } function hide_reply(){ document.getElementById('display_reply').style.display = "none"; document.getElementById('thebox').disabled=false; } </script> <style type="text/css"> #display_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } </style> </head> <body> <div id="display_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <form> <input type="checkbox" id="thebox" value="prompt" onclick="reveal_reply()" /> <!--<input style="float:left" type="button" name="my_message" value= "Submit" onclick=" reveal_reply()" />--> </form> </body> </html> I was hoping I could make it so there would be multple checkboxes and each one would open a different div tag; however, I can't figure how I broke the onclick function which calls my reveal function. any help would be appreciated! Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>New document</title> <script type="text/javascript"> function reveal_reply(){ if(document.getElementById('DEP').checked){ document.getElementById('DEP_reply').style.display = "block"; document.getElementById('DEP').disabled=true; } if(document.getElementById('MD').checked){ document.getElementById('MD_reply').style.display = "block"; document.getElementById('MD').disabled=true; } if(document.getElementById('ORG').checked){ document.getElementById('ORG_reply').style.display = "block"; document.getElementById('ORG').disabled=true; } if(document.getElementById('SEC').checked){ document.getElementById('SEC_reply').style.display = "block"; document.getElementById('SEC').disabled=true; } if(document.getElementById('BOG').checked){ document.getElementById('BOG_reply').style.display = "block"; document.getElementById('BOG').disabled=true; } if(document.getElementById('SW').checked){ document.getElementById('SW_reply').style.display = "block"; document.getElementById('SW').disabled=true; } } function hide_reply(){ document.getElementById('DEP_reply').style.display = "none"; document.getElementById('DEP'.disabled=false; document.getElementById('MD_reply').style.display = "none"; document.getElementById('DEP').disabled=false; document.getElementById('ORG_reply').style.display = "none"; document.getElementById('ORG').disabled=false; document.getElementById('SEC_reply').style.display = "none"; document.getElementById('SEC').disabled=false; document.getElementById('BOG_reply').style.display = "none"; document.getElementById('BOG').disabled=false; document.getElementById('SW_reply').style.display = "none"; document.getElementById('SW').disabled=false; } </script> <style type="text/css"> #DEP_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } #MD_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } #ORG_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } #SEC_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } #BOG_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } #SW_reply { height: 245px; width:300px; overflow: visible; background-color:#FFCC99; font-size:11px; font-family:verdana; color:#000; padding: 5px 10px; position: absolute;; left: 300px; top: 130px; display: none; } </style> </head> <body> <div id="DEP_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <div id="MD_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <div id="ORG_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <div id="SEC_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <div id="BOG_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <div id="SW_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> <form> <input type="checkbox" id="DEP" value="prompt" onclick="reveal_reply()" /> <input type="checkbox" id="MD" value="prompt" onclick="reveal_reply()" /> <input type="checkbox" id="ORG" value="prompt" onclick="reveal_reply()" /> <input type="checkbox" id="SEC" value="prompt" onclick="reveal_reply()" /> <input type="checkbox" id="BOG" value="prompt" onclick="reveal_reply()" /> <input type="checkbox" id="SW" value="prompt" onclick="reveal_reply()" /> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/230916-js-checkbox-enable-disable-div-tag/ Share on other sites More sharing options...
Eyewash01 Posted March 18, 2011 Share Posted March 18, 2011 I haven't read through your code, but you could just have something like this: <input type="checkbox" name="fmCheck1" id="fmCheck1" onclick="showhide_div(1);" /> <input type="checkbox" name="fmCheck2" id="fmCheck2" onclick="showhide_div(2);" /> <div id="div1"> Hello </div> <div id="div2"> Goodbye </div> <script type="text/javascript"> function showhide_div(theID){ if (document.getElementById("fmCheck"+theID).checked == true){ document.getElementById("div"+theID).style.display = "block"; } else{ document.getElementById("div"+theID).style.display = "none"; } } </script> Not really a PHP question....lol Link to comment https://forums.phpfreaks.com/topic/230916-js-checkbox-enable-disable-div-tag/#findComment-1188953 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.