uncheck box no refresh

[RogueDogg]

I have I believe a unique issue. If you check off a box it displays a message below and if you check the other box it unchecks the previous one and displays it's corresponding message. K now to the problem, if you uncheck the box you just checked, it doesn't clear the message without having to "refresh" the entire page. So any help would be greatly appreciated here.

<script language="javascript">
function approval(element) {
  
if (element == "approve") {
  document.getElementById('butdisapprove').checked = false;
  document.getElementById('approve').style.visibility = "visible";
  document.getElementById('disapprove').style.visibility = "hidden";
  } else {
  document.getElementById('butapprove').checked = false;
  document.getElementById('disapprove').style.visibility = "visible";
  document.getElementById('approve').style.visibility = "hidden";
  }
 
}
</script>
<?PHP
$userip = ($_SERVER['X_FORWARDED_FOR'])? $_SERVER['X_FORWARDED_FOR'] : gethostbyaddr($_SERVER['REMOTE_ADDR']);
$approve = "Approve this postcard: <input type=\"checkbox\" id=\"butapprove\" onclick=\"approval('approve');\">
<br>
<div id=\"approve\"> By selecting this checkbox you approve this postcard has been created to your satisfaction.</div>";
$disapprove = "Disapprove this postcard: <input type=\"checkbox\" id=\"butdisapprove\" onclick=\"approval('disapprove');\">
<br>
<div id=\"disapprove\"> By selecting this checkbox you <b>DO NOT</b> approve this postcard and you should contact us immediately at 1-888-#*$!-#*$!x.</div>";
$greeting = "For your security we have collected and stored in our database the following information for future review: <br /><br />";
$port = strtolower($_SERVER['REMOTE_PORT']);
$message .= "<b class='special'>Your IP Address is:</b><br />"."<u class='special2'>".$userip ." <b>:</b> " .$port ."</u>";
$br = strtolower($_SERVER['HTTP_USER_AGENT']);
$message2 .= "<b class='special'>Your Browser type is:</b><br />"."<u class='special2'>".$br."</u>";
$time = date("g:ia \o\\n F j, Y");
$message3 .= "<b class='special'>You approved your postcard at:</b><br />"."<u class='special2'>".$time."</u>";
echo "<table align='center' width='500'><tr><td align='center' class='one'><form id=\"Form1\" method=\"post\" runat=\"server\"><img src='postcard.jpg' width='487' height='369'><br />".$approve."\n".$disapprove."\n".$greeting." ".$message."<br />".$message2."<br />".$message3."</form></td></tr></table>";
?>
<script type="text/javascript">
document.getElementById('approve').style.visibility = 'hidden';
document.getElementById('disapprove').style.visibility = 'hidden';
 
</script>

[daveVk]

document.getElementById('approve').style.visibility = "visible";

becomes

if ( element.checked === true ) {
document.getElementById('approve').style.visibility = "visible";
}
else {
document.getElementById('approve').style.visibility = "hidden";
}

and same for disapprove, consider using radio buttons instead of check boxs.

[RogueDogg]

Something doesn't look right, and it's not working :-)

<script language="javascript">
function approval(element) {
  
if (element == "approve") {
  document.getElementById('butdisapprove').checked = false;
if ( element.checked === true ) { 
  document.getElementById('disapprove').style.visibility = "visible"; 
} 
else { 
  document.getElementById('disapprove').style.visibility = "hidden"; 
} 
else {
  document.getElementById('butapprove').checked = false;
if ( element.checked === true ) { 
  document.getElementById('approve').style.visibility = "visible"; 
} 
else { 
  document.getElementById('approve').style.visibility = "hidden"; 
}
 
}
</script>

[RogueDogg]

consider using radio buttons instead of check boxs

you can't deselect a radio button ( unless I'm wrong )?

[daveVk]

<script language="javascript">

function approval(element) {

if (element == "approve") {

document.getElementById('butdisapprove').checked = false;

if ( element.checked === true ) {
document.getElementById('approve').style.visibility = "visible";
}
else {
document.getElementById('approve').style.visibility = "hidden";
}
else {

document.getElementById('approve').checked = false;

if ( element.checked === true ) {
document.getElementById('disapprove').style.visibility = "visible";
}
else {
document.getElementById('disapprove').style.visibility = "hidden";
}

}

</script>

Yes with radio button would need third 'no opinion' button.

[edited by: daveVk at 7:06 am (utc) on Jan. 31, 2008]

[RogueDogg]

hmmm must be somewhere else in the file but I'm getting an error line 62 char 1 Object Expected. I got this before and the line # didn't match up but it was a syntax error...I'll keep looking but?

[RogueDogg]

well still no luck, I did however make a few changes and this is my new code:

<script language="javascript">
function approval(element) {
if (element == "approve") {
document.getElementById('butdisapprove').checked = false;
}
if ( element.checked === true ) {
document.getElementById('approve').style.visibility = "visible";
}else {
document.getElementById('disapprove').style.visibility = "hidden";
}
if ( element.checked === true ) {
document.getElementById('butapprove').checked = false;
}else {
document.getElementById('disapprove').style.visibility = "visible";
}else {
document.getElementById('approve').style.visibility = "hidden";
}
}
</script>

Please anyone have any suggestions? I'm out of ideas...

[daveVk]

f (element == "approve") {

document.getElementById('butdisapprove').checked = false;
}
if ( element.checked === true ) {

document.getElementById('approve').style.visibility = "visible";

}else {

document.getElementById('disapprove').style.visibility = "hidden";
}
if ( element.checked === true ) {

document.getElementById('butapprove').checked = false;

}else {

document.getElementById('disapprove').style.visibility = "visible";

}else {

document.getElementById('approve').style.visibility = "hidden";
}

}

</script>

Bad syntax cant have 2nd else
-------------------------------------------
In this section

if ( element.checked === true ) {

document.getElementById('approve').style.visibility = "visible";

}else {

document.getElementById('disapprove'?).style.visibility = "hidden";
}

I assume if box is checked ( approved ) you want the "approved" text shown else you want the "approved" ( NOT disapproved ) text hidden

----------------------------------

document.getElementById('butdisapprove').checked = false;

should become

document.getElementById('butdisapprove').checked = false;
document.getElementById('disapprove').style.visibility = "hidden";

ditto on butapprove

[RogueDogg]

LOL now I'm completely lost ;-S

[daveVk]

Lets clean it up then

function approval(element) {

var noBox = document.getElementById('butdisapprove');
var yesBox = document.getElementById('butapprove');
var yesText = document.getElementById('approve');
var noText = document.getElementById('disapprove');

// make sure opposite unticked
if ( element == "approve" ) { noBox.checked = false; }
else { yesBox.checked = false; }

if (yesBox.checked === true) { yesText.style.visibility ="visible";}
else { yesText.style.visibility = "hidden";}

if (noBox.checked === true) { noText.style.visibility ="visible";}
else { noText.style.visibility = "hidden";}

}

[RogueDogg]

Yeppers that it's. WOW it's pretty neat how far the code has come to make an addition such as this feature. I'm not sure i'll ever fully understand JS but thanks to you I have a better understanding of atleast 1 function.

:-) CHEERS

THANKS again...