Forum Moderators: open
<script type="text/javascript">
toggleColor(obj,chkID) {
var chk = document.getElementById(chkID);
if (obj.style.backgroundColor == "orange") {
obj.style.backgroundColor = "green";
chk.value = "false";
} else {
obj.style.backgroundColor = "orange";
chk.value = "true";
}
}
</script>
...
<td style="background-color:green;" onclick="toggleColor(this,'hdnCheckValue')">
<input type="hidden" id="hdnCheckValue" name="hdnCheckValue" value="false"/>
</td>
echo "<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[$rm][]' value='$d' >
</TD>\n";
to get the values. Can I use that name and value in your code instead of "hdnCheckValue" and "false".
That function is assigning the value the checkbox would send to the server to a hidden element when the box is checked, and setting the element's value to the empty string if it's unchecked.
For the code you posted, you'd probably want the td to look like this:
<td style="background-color:green;" onclick="toggleColor(this,'book[$rm][]','$d')">And the function like this:
function toggleColor(obj,chkID,val) {
var chk = document.getElementById(chkID);
if (obj.style.backgroundColor == "orange") {
obj.style.backgroundColor = "green";
chk.value = "";
} else {
obj.style.backgroundColor = "orange";
chk.value = val;
}
} The code above will make sure you get a value for the fake checkbox if it's been "checked" (turned orange), or the empty string if it hasn't. Will that work?
echo '<td style="background-color:green;" onclick="toggleColor(this,'book[$rm][]','$d')"><INPUT type="hidden" name="book[$rm][]" value="$d" ></td>';
<td style="background-color:green;" onclick="toggleColor(this,'book[101][]','2005-09-14')"><INPUT type="hidden" name="book[101][]" value="2005-09-13" ></td>
\'banana\'
(or use a Heredoc statement)
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function toggleColor(obj,chkID,val) {
var chk = document.getElementById(chkID);
if (obj.style.backgroundColor == "orange") {
obj.style.backgroundColor = "green";
chk.value = "";
} else {
obj.style.backgroundColor = "orange";
chk.value = "val";
}
}
</script> </head>
<body>
<form name="form1" id="form1" method="post" action="<?php echo $PHP_SELF;?>">
<table align='left'TABLE border='4' cellspacing='1' cellpadding='0'>
<TR><TH>Room</TH>
<TH width=20px>17</TH>
<TH width=20px>18</TH>
<TH width=20px>19</TH>
</TR>
<TR><TD>101</TD>
<td style="background-color:green;" onclick="toggleColor(this,'test','8')"><input name="test" type="hidden" value="8" /></td>
<td style="background-color:green;" onclick="toggleColor(this,'test','9')"><input name="test" type="hidden" value="9" /></td>
<td style="background-color:green;" onclick="toggleColor(this,'test','10')"><input name="test" type="hidden" value="10" /></td>
</TR>
</TABLE>
<input type="submit" name="Submit" value="Submit" />
</form>
<?php echo $_POST['test'];?>
</body>
</html>
document.getElementsByName('_the_name_')[index]
Old way:
document.forms.form1.elements['_the_name_'][index]
------
If there is only one such element, you will still need the [index] part with the W3C way, but not with the old.
<script type="text/javascript">
function toggleColor(obj,chkID,val) {
var chk = document.getElementsByName('test')[index]
if (obj.style.backgroundColor == "orange") {
obj.style.backgroundColor = "green";
chk.value = "";
} else {
obj.style.backgroundColor = "orange";
chk.value = "val";
}
}
</script>
var chk = document.getElementsByName('test')[0]
I still got no value when echoed
--------
In fact, you'll have to excuse my ignorance. I just took the time to read your post #1 properly. Should have something for you in a mo'.
Have a look at my message #10 for a working example.
Trouble is... it won't work, or at least I don't think so. I have the feeling that the values of form inputs that are not displayed (ie CSS display: none, as opp. to type="hidden" ) are not posted.
I'm posting the code just for reference, and for something to amend in a moment.
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.scriptDisabled .chkCell input { display: none;}
.chkCell {background-color: green;}
</style>
<script type="text/javascript">// set checkboxes to "display:none;"
document.getElementsByTagName('html')[0].className = 'scriptDisabled';function toggleBox(cell)
{
var box = cell.getElementsByTagName('input')[0];
// Toggle check & get new state
var doCheck = (box.checked =!box.checked);
// empty --> green (via sheet)
cell.style.backgroundColor = doCheck? 'orange' : '';
}
</script>
</head><body>
<form name="form1" id="form1" method="post" action="<?php echo $PHP_SELF;?>">
<table align='left'TABLE border='4' cellspacing='1' cellpadding='0'>
<tr>
<th>Room</th>
<th width=20px>17</th>
<th width=20px>18</th>
<th width=20px>19</th>
</tr>
<tr>
<td>101</td>
<!-- ( )s for some content, if inputs hidden by script -->
<td class="chkCell" onclick="toggleBox(this)">
<input name="test" type="checkbox" value="8"></td>
<td class="chkCell" onclick="toggleBox(this)">
<input name="test" type="checkbox" value="9"></td>
<td class="chkCell" onclick="toggleBox(this)">
<input name="test" type="checkbox" value="10"></td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" />
</form>
<?php echo $_POST['test'];?></body>
</html>
[edited by: jatar_k at 3:48 pm (utc) on Oct. 5, 2005]
<input name="test" type="[blue]hidden[/blue]" value="8[blue]:0[/blue]">The function is changed to this:
function toggleBox(cell)
{
var box = cell.getElementsByTagName('input')[0];
// get 'checked' state from last char (0¦1)
var doCheck =! Number(box.value.slice(-1));
// Switch last char
box.value = box.value.replace(/.$/, Number(doCheck));
// empty --> green (via sheet)
cell.style.backgroundColor = doCheck? 'orange' : '';
}
The idea is to signify checkedness by swapping the zero for a 1.
A couple of (possible) problems here.
1. This means you'll have to parse out the :0 or :1 at the server side. Not so tough really, but if this is beyond your control then the whole idea is a non-starter.
2. No fall-back for JS-disabled browsers. However, you could just throw the real checkboxes in there too, they will still be hidden normally via the CSS. You might get parallel postings back at the server though!
See how it goes.
echo "<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[$rm][]' value='$d' ></TD>\n";
<table align='left'TABLE border='4' bordercolor='#A6A6D2' cellspacing='1' cellpadding='0'>
<TR><TH>Room</TH>
<TH width=20px>11</TH>
<TH width=20px>12</TH>
<TH width=20px>13</TH>
<TH width=20px>14</TH>
<TH width=20px>15</TH>
<TH width=20px>16</TH>
<TH width=20px>17</TH>
<TH width=20px>18</TH>
<TH width=20px>19</TH>
<TH width=20px>20</TH>
</TR>
<TR><TD>101</TD><TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-11' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-12' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-13' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-14' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-15' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-16' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-17' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-18' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-19' >
</TD>
<TD style='background:green; colour:white'>
<INPUT type='checkbox' name='book[101][]' value='2005-09-20' >
</TD>
</TR>
</table>
The problem with using checkboxes is that setting them to display: none; may well (I'm fairly sure in fact) reseult in them not being posted (try it in a few browsers).
While writing, I've realised that this could be solved by using the CSS visibility property instead. So..
1) Take the code from my post (msg #:19).
2) Swap
"display: none;""visibility: hidden;""color: white;"3) You can now remove the $nbsp;-s that I put in the cells too.
Moving the style attributes from the HTML into a stylesheet is, of course, a little more efficient on the server, and in download, and etc, but the main benefit is that it allows us that little trick that the checkboxes to only be hidden if Javascript is enabled in the browser (If it is, the HTML element gets a className added, "scriptEnabled", and this kicks the contextual CSS rule into action).
I think this'll work (as regards posting of form values). I'll test it myself later, but right now it's well past my bedtime.
var eselected = document.getElementById("2005-09-20");<html>
<head>
<title></title>
<style>
td.yes{
align:center;
width:158px;
height:40px;
background-color:orange;
font-size:14px;
font-family: Verdana Arial Helvetica sans-serif;
cursor:pointer;
}
td.no{
align:center;
width:158px;
height:40px;
background-color:green;
font-size:14px;
font-family: Verdana Arial Helvetica sans-serif;
cursor:pointer;
}
</style>
<script>
function doselection(cell)
{
var eselected = document.getElementById("2005-09-20");
var submission = document.getElementById("option");
eselected.setAttribute('className','no');
cell.setAttribute('className','yes');
eselected = cell;
submission.setAttribute('value',cell.getAttribute("id"));
}
</script></head>
<body >
<form action=Untitled-2.php method="post" name="form1" id="form1">
<input type=hidden id=option name=optval[] value="">
<?php
$d="2005-09-20";
$e="2005-09-21";
$f="2005-09-22";
$g="2005-09-27";
?>
<table border=2>
<tr>
<td id=<?php echo "$d"?> class=no onclick="doselection(this)"> </td>
<td id=<?php echo "$e"?> class=no onclick="doselection(this)"> </td>
<td id=<?php echo "$f"?> class=no onclick="doselection(this)"> </td>
<td id=<?php echo "$g"?> class=no onclick="doselection(this)"> </td>
</tr>
</table>
<input name="Submit" type=submit id="Submit" value="Submit">
</form>
<?php
if($Submit){
print_r($optval);
}
?>
</body></html>
On the server side of things, there is only one hidden input, this would be filled with some form of delimited string with all the selected values. It will be just one form value though, so you can therefor leave out the [].
Before I move on, am I getting the right end of the stick, ?
1) Why is that cell (id="2005-09-20") being deselected when another is clicked.
2) (At present) there is only a single hidden input. I imagíne that using [] will only add an extra layer of confusion at the server. There are indeed multiple values being represented, but there is only a single value being sent.
Here's how I see it....
<html>
<head>
<title>
</title>
<style>
#checkRow TD
{
align:center;
width:158px;
height:40px;
font-size:14px;
font-family: Verdana Arial Helvetica sans-serif;
cursor:pointer;
}.yes{ background-color:orange;}
.no { background-color:green; }
</style>
<script>/*
Avoid set/get attribute with classes, if possible
- IE: 'className', while W3C: 'class'
So we'll stick with dot syntax. */
function doselection(cell)
{
cell.className = (cell.className=="yes")?"no":"yes";
}function getValues()
{
var cells = document.getElementById('checkRow')
.getElementsByTagName('td');
for(var k=0, cell, vals=[]; cell=cells[k++];)
{
if(cell.className=="yes")
vals[vals.length] = cell.id;
}
// join into ':' delimited string
// just split this single value in the PHP script.
document.getElementById('optval').value = vals.join(':');
}</script></head>
<body ><form action=receive.php method="post" name="form1" id="form1"
onsubmit="getValues()">
<input type=hidden id="optval" name="optval" value="">
<table border=2>
<tr id="checkRow">
<td id=2005-09-20 class=no onclick="doselection(this)"> </td>
<td id=2005-09-21 class=no onclick="doselection(this)"> </td>
<td id=2005-09-22 class=no onclick="doselection(this)"> </td>
<td id=2005-09-27 class=no onclick="doselection(this)"> </td>
</tr>
</table>
<input name="Submit" type=submit id="Submit" value="Submit">
</form>
</body></html>
