Forum Moderators: open
It is a clickable box which changes color and sends a hidden value upon submit.
My problem is that I need to change the background-colors "green" and "red" to hex values like #f30 and #cf0, but it messes up the behavior of the box. I seem to have run out of ideas!
Any help would be much appreciated.
Thank you.
Here's the code :
<html>
<head>
<title>testing</title>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);if (obj.style.backgroundColor == "red")
{
obj.style.backgroundColor = "green";
chk.value = "";
}
else
{
obj.style.backgroundColor = "red";
chk.value = "RED";
}
}
</script>
</head>
<body><div style="background-color:green; width: 50px; height: 50px;" onclick="toggleColor(this,'hdnCheckValue1')"></div>
<form method="post" action="<?php echo $PHP_SELF;?>">
<input type="hidden" id="hdnCheckValue1" name="hdnCheckValue1" value="GREEN"/>
<input type="submit" name="submit" value="OK" />
</form><? echo $_POST['hdnCheckValue1'];?>
</body>
</html>
What I would do is use a className as a flag instead of modifying and testing the color value directly. Then let CSS handle the coloring. :)
If you want sample code, I can probably whip some up, but you can probably get the gist of what should be done.
<style type="text/css">
.red {background-color:#ff0000;}
.green {background-color:#00ff00;}
</style>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);
if (obj.className == "red")
{
obj.className = "green";
chk.value = "";
obj.set=true;
}
else
{
obj.className = "red";
chk.value = "RED";
obj.set=false;
}
}
