Jump to content

Recommended Posts

hey freaks!  8)

 

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>

 

Link to comment
https://forums.phpfreaks.com/topic/227194-js-onclick-embedded-in-a-php-form/
Share on other sites

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>

 

 

 

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.

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

 

 

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>

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?

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>

  • 1 month later...

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>

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>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.