powpow Posted February 9, 2011 Share Posted February 9, 2011 hey freaks! looking for some help incorporating js into my php dynamic check box. What I would like the javascript to do is when a specific box is checked it will make a hidden div visible. There will be another form with the necessary parameters now visible in the div tag. The problem I am running into is getting the js to run inside the php. here is my code thx in advance. <html> <script> var browserType; if (document.layers) {browserType = "nn4"} if (document.all) {browserType = "ie"} if (window.navigator.userAgent.toLowerCase().match("gecko")) { browserType= "gecko" } function hide() { if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById("DEP")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById("DEP")'); else document.poppedLayer = eval('document.layers["DEP"]'); document.poppedLayer.style.visibility = "hidden"; } function show() { if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById("DEP")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById("DEP")'); else document.poppedLayer = eval('document.layers["DEP"]'); document.poppedLayer.style.visibility = "visible"; } </script> <form> <?php //WrkComp********** include "db.php"; $userUAID = 1000; $Disabled = ""; $sql = "SELECT * FROM `WrkComp` WHERE UAID = $userUAID"; $result = mysql_query($sql) or die(mysql_error() . " IN $result"); while(list($UAID, $DEP, $MD, $ORG, $SEC, $BOG, $SW) = mysql_fetch_row($result)){ //DEP $checked = ($DEP==1) ? 'checked="checked"' : ''; echo "<tr><td>WrkComp</td><td><input type='checkbox'" ?> <script>onClick="show()" </script> <? "name='WrkComp[]' value='DEP' '.$checked.' '.$Disabled.'/></td>"; //MD $checked = ($MD==1) ? 'checked="checked"' : ''; echo '<td><input type="checkbox" name="WrkComp[]" value="MD" '.$checked.' '.$Disabled.'/></td>'; //ORG $checked = ($ORG==1) ? 'checked="checked"' : ''; echo '<td><input type="checkbox" name="WrkComp[]" value="ORG" '.$checked.' '.$Disabled.'/></td>'; //SEC $checked = ($SEC==1) ? 'checked="checked"' : ''; echo '<td><input type="checkbox" name="WrkComp[]" value="SEC" '.$checked.' '.$Disabled.'/></td>'; //BOG $checked = ($BOG==1) ? 'checked="checked"' : ''; echo '<td><input type="checkbox" name="WrkComp[]" value="BOG" '.$checked.' '.$Disabled.'/></td>'; //SW $checked = ($SW==1) ? 'checked="checked"' : ''; echo '<td><input type="checkbox" name="WrkComp[]" value="SW" '.$checked.' '.$Disabled.'/></td>'; echo '<td><input type="HIDDEN" name="WrkComp[]" value="EMPTY" /></td></tr>'; } echo "</script>"; mysql_free_result($result); ?> <div id="DEP" style="visibility: hidden"> <table> <tr> <th><h3> WrkComp Security Details</h3> </th> </tr> <tr> <th>BOG</th> </tr> <tr><input type="text" onClick="show()" name="WrkCmpSD[]" value="show"> </tr> </form> </table> <big></big> <layer></layer></div> </html> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/ Share on other sites More sharing options...
sunfighter Posted February 9, 2011 Share Posted February 9, 2011 It is hard to see what you want done, because your code is so messed up. You need a header and a body inside of the html tags. Your script tag is not defined I think you want <script type="text/javascript">. Place ALL of you js here as functions and call those functions inside of your html body. You need some css to define your div and that has to be hidden. Correct your code and repost your question IE: <!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(){ document.getElementById('display_reply').style.display = "block"; } </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"></div> <form> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" reveal_reply()" /> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1172071 Share on other sites More sharing options...
sunfighter Posted February 10, 2011 Share Posted February 10, 2011 Looking at this in more depth I see this: //DEP $checked = ($DEP==1) ? 'checked="checked"' : ''; echo "<tr><td>WrkComp</td><td><input type='checkbox'" ?> <script>onClick="show()" </script> <? "name='WrkComp[]' value='DEP' '.$checked.' '.$Disabled.'/></td>"; If your trying to call js when a checkbox is checked, I dont think it can be done. You can put a button in the form and then check to see what checkboxes are checked and proceed accordingly. Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1172107 Share on other sites More sharing options...
powpow Posted February 10, 2011 Author Share Posted February 10, 2011 Thanks for the reply... what I was trying to do was take this example that hides a div tag when you click hide and then shows it when you click show; <script> var browserType; if (document.layers) {browserType = "nn4"} if (document.all) {browserType = "ie"} if (window.navigator.userAgent.toLowerCase().match("gecko")) { browserType= "gecko" } function hide() { if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById("realtooltip")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById("realtooltip")'); else document.poppedLayer = eval('document.layers["realtooltip"]'); document.poppedLayer.style.visibility = "hidden"; } function show() { if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById("realtooltip")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById("realtooltip")'); else document.poppedLayer = eval('document.layers["realtooltip"]'); document.poppedLayer.style.visibility = "visible"; } </script> <form> <input type=button onClick="hide()" value="hide"> <input type=button onClick="show()" value="show"> </form> <div id="realtooltip" style="visibility: visible"> <big>Real's HowTo</big> <layer></layer></div> into a program that would show a div when a user selects a check box. This can be done by simply changing the <input type=button onClick="hide()" value="hide"> to..... <input type=checkbox onClick="hide()" value="hide"> up to this part works. Now with the project I am working on I will have a huge form with a lot of checkboxes that are retrieving their value from a database(check/unchecked). Some of these checkboxes need to supply more parameters which I would like to satisfy by having another form pop up from a hidden div tag when you click a checkbox. What seems to be the issue is my use of the script tag inside the echo statement: echo "<tr><td>WrkComp</td><td><input type='checkbox'" ?> <script>onClick="show()" </script> <? "name='WrkComp[]' value='DEP' '.$checked.' '.$Disabled.'/></td>"; Let me know what you think. ty Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1172257 Share on other sites More sharing options...
sunfighter Posted February 11, 2011 Share Posted February 11, 2011 The script I gave above will display a div for you. Put your form in the div for your addition info along with a submit button to close(hide) the div. You don't need a div but a js prompt box with submit button will work just as well. What I don't like about the checkbox is = yes it opens a div when you check it, BUT it opens the div again if you uncheck it. If that's the way you want to go you have to have the script to make sure it's checked before displaying the box/div. I have done that in the function reveal_reply(). Hope this wil help. P.S. pass the checkbox id to the function and you can contorl things from there. <!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"; } } function hide_reply(){ document.getElementById('display_reply').style.display = "none"; } </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> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1172541 Share on other sites More sharing options...
powpow Posted February 11, 2011 Author Share Posted February 11, 2011 Thanks this is great. I was able to make the code work how I had it before but as you have already hinted there were some issues so I plan on continuing the way you have pointed out. another questions i was wondering is can there be more than one onClick? I was wondering because I would like to make the checkbox "disabled" when the div is being displayed which I believe will have to be another js funtion.... any ideas? Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1172884 Share on other sites More sharing options...
sunfighter Posted February 12, 2011 Share Posted February 12, 2011 Easy to do. Change above script to this : <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> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1173278 Share on other sites More sharing options...
powpow Posted March 17, 2011 Author Share Posted March 17, 2011 so I was hoping to figure this out on my own but still havnt a clue.... I wanted to make this work for multiple checkboxes and i dont know if it is just because I am missing something simple or it is just logically not making sense. As of right now when you click a checkbox nothing happens:-/ Thank you for any help. <!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; } [/co#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> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1188640 Share on other sites More sharing options...
sunfighter Posted March 22, 2011 Share Posted March 22, 2011 So close. Here's what you what with only one CKbox and div. <!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> <meta name="generator" content="TSW phpCoder 2008" /> <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; } </style> </head> <body> <label for="show_dep"> show me the dep <input name="show_dep" type="checkbox" id="dep" onclick = "javascript:document.getElementById('DEP_reply').style.display = 'block';" /> </label> <div id="DEP_reply"> <input style="float:left" type="button" name="my_message" value= "Submit" onclick=" hide_reply()" /> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/#findComment-1190663 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.