Replacing checkboxes

Forum Moderators: open

Message Too Old, No Replies

Replacing checkboxes

kiwi1066

3:16 am on Sep 8, 2005 (gmt 0)

I have a form that has a number of checkboxes. I have used some Javascript that I found on google to hide the checkboxes and instead show an image ( a small grren square) that changes to orange when clicked. It all works but the trouble is that when using SSL the images load too slowly. Is it possible to do this using background color instead of images and if not is there another way? Each checkbox is in a table cell and I was wondering if you could somehow get rid of the checkboxes and instead assign a value to each cell and then use an onclick event to get that value. Thanks.

kiwi1066

12:08 am on Sep 21, 2005 (gmt 0)

My mistake..for some reason

var cells = document.getElementById('checkRow').getElementsByTagName('td');

didn't copy and paste correctly.
Great..thanks for that!

kiwi1066

12:47 am on Sep 21, 2005 (gmt 0)

But I have just realized that this will only work where there is only one row because of

var cells = document.getElementById('checkRow').getElementsByTagName('td');

as the ID has to be unique. Is it possible to change to something like

var cells = document.getElementsTagName('tr').getElementsByTagName('td');

?
I tried just that but it didn't work.

kiwi1066

1:55 am on Sep 21, 2005 (gmt 0)

OK..what I did was change it by giving the table an id="bookings" and changed the code so that that line now reads


var cells = document.getElementById('bookings').getElementsByTagName('td');

and it seems to work fine..can you see a problem with me doing this?

Bernard Marx

7:21 am on Sep 21, 2005 (gmt 0)

You might go insane?

kiwi1066

7:40 pm on Sep 21, 2005 (gmt 0)

Too late for that! I do have one problem though. The code picks up the dates selected but not the room number associated with those dates.

Bernard Marx

8:43 pm on Sep 21, 2005 (gmt 0)

Then we need to put the information for that back into the code somewhere - any ideas?

kiwi1066

9:59 pm on Sep 21, 2005 (gmt 0)

Well when I look at the original php code that used checkboxes it was set out as


foreach ($bookings as $rm => $dates) {
   echo "<TR><TD>$rm</TD>";
   foreach ($dates as $d => $booked) {
 
   
     if booked){
 
    echo "<TD style='background:red; colour:white'>&nbsp;</TD>\n";
   }
 
      else {
    echo "<TD style='background:green; colour:white'>
    <INPUT type='checkbox' name='book[$rm][]' value='$d'>
    </TD>\n";    }

so having multple inputs like that creates a multidimensional array. I don't know....is it possible to do that with your code. ie have it something like


 echo "<td id='$d' width='20' class=no onclick='doselection(this)'<input type=hidden id=\"optval\" name=\"book[$rm][]\" value=\"\">&nbsp;</td>";

Bernard Marx

7:15 am on Sep 22, 2005 (gmt 0)

Not sure I understand. How many boxes are there?
- a table: (dates * rooms )?

kiwi1066

7:44 pm on Sep 22, 2005 (gmt 0)

If you put this in your browser it will give you an idea. It is what my code ouputs. So if you click on a green cell it should also select the room number ie 101 or 102
<code>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.yes{ background-color:orange;}
.no { background-color:green; }
</style>
</head>

</body>
</html>
[/code]

Bernard Marx

9:28 pm on Sep 22, 2005 (gmt 0)

I think I have a simple solution for that.

Give each "room row" (the <tr> element) an id - the room number.

Then change this bit in the loop of the getValues function from

vals[vals.length] = cell.id;

vals[vals.length] = cell.parentNode.id+'@'+cell.id;

(@ - or a delimiter of your choice)

Now, you'll receive a double-delimited string value,

room_no@date:room_no@date:....

which you'll have to parse at the server (not beyond my capabilities, but I don't know exactly what you're doing with it).

PS You could, if you don't want to bother with extra ids, use the content of the row's first cell (since it carries the room No already)

// incl. a quick space trim

vals[vals.length] 
= cell.parentNode.cells[0].innerHTML.replace(/^\s+�\s+$/g,'')+'@'+cell.id;

..but that leaves the script a little vulnerable.

Bernard Marx

9:32 pm on Sep 22, 2005 (gmt 0)

It's not particularly important (or interesting), but all of the attributes of the table cells could be done away with, with the help of a little sharpness, which would cut down the bloat.

kiwi1066

9:38 pm on Sep 22, 2005 (gmt 0)

What do you mean by "that leaves the script a little vulnerable"..those are scary words!
Thanks for that solution by the way.
What I have to do is get the result into an multi dimensional array showing the room and dates

kiwi1066

9:42 pm on Sep 22, 2005 (gmt 0)

Re getting rid of the attributes ..how do you mean?

Bernard Marx

10:19 pm on Sep 22, 2005 (gmt 0)

that leaves the script a little vulnerable

Just means that the script relies on the fact that the first cells don't carry the numbers as, say, images, for instance. I sometimes think that the script relying on the actual content is a vulnerability.

get the result into an multi dimensional array

That kind of thing would do equally well, but I don't think you need a full 'table' there, just 2 correlations of info by index:

// ie: date = dates[cell.cellIndex-1] // not the 1st cell
dates = 
[
    '2005-09-13',
    '2005-09-14',
    '2005-09-15',
    '2005-09-16',
    '2005-09-17',
    '2005-09-18',
    '2005-09-19',
    '2005-09-20',
    '2005-09-21',
    '2005-09-22'
]// ie: room = rooms[cell.parentNode.rowIndex-1] // not the header row
rooms = [101,102]

kiwi1066

11:56 pm on Sep 22, 2005 (gmt 0)

Thanks for all that

That works great!

kiwi1066

10:42 pm on Sep 23, 2005 (gmt 0)

One last thing..how can I get the cells that display the room numbers to have a background color other than green while leaving the date cells green?

Bernard Marx

8:03 am on Sep 24, 2005 (gmt 0)

Hmmm. For CSS2-supporting browsers, this will do:

#bookingscal td:first-child{ background-color:red;}

but for IE, I don't know. It may be possible by messing around using <colgroup> elements.
The less brain-taxing way, is to take a step back and attach a class attribute to every cell in that column.

kiwi1066

11:21 am on Sep 25, 2005 (gmt 0)

I have got the thing working when using a html table but when I try to get it working using a dynamically generated table I can't figure out how to use the date as the "th"id. eg in html it is
<th id=2005-09-13 >13</th>
but how can I achieve that with
echo "<TH>" . date('d', $s) . "</TH>\n"
The posting of your final code seems to have disappeared.

Bernard Marx

2:45 pm on Sep 25, 2005 (gmt 0)

This is a PHP issue. I guess something like:

echo '<th id="'. date("_some_switches_", $s)>. '">' ;

Having only just started with PHP, I really don't know right now!

This 49 message thread spans 2 pages: 49