T
timothy.pollard
Hi all
A few weeks ago a nice man called Evertjan helped me create a form
validation system that took a table of four columns of checkboxes and:
- allowed only one checkbox in each row to be checked
- totalised the number of checked boxes in each column
The system works fine until you have more than 10 rows, at which point
the myrow substr(1,1) fails to correctly identify the row number
because it needs to extract two characters instead of one, and the
mycol substr also then doesn't work.
I'm a noob at javascript, so I'd really appreciate any help in adapting
the code (below). It works fine up until row 10, then it goes
pear-shaped.
Thanks in advance for any help.
TP
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>
<body>
<table border=0>
<tr><td width="366">
<table>
<tr>
<td><input type=checkbox id=r0c0 onclick='c(this)'> blah
<td><input type=checkbox id=r0c1 onclick='c(this)'> blah
<td><input type=checkbox id=r0c2 onclick='c(this)'> blah
<td><input type=checkbox id=r0c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r1c0 onclick='c(this)'> blah
<td><input type=checkbox id=r1c1 onclick='c(this)'> blah
<td><input type=checkbox id=r1c2 onclick='c(this)'> blah
<td><input type=checkbox id=r1c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r2c0 onclick='c(this)'> blah
<td><input type=checkbox id=r2c1 onclick='c(this)'> blah
<td><input type=checkbox id=r2c2 onclick='c(this)'> blah
<td><input type=checkbox id=r2c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r3c0 onclick='c(this)'> blah
<td><input type=checkbox id=r3c1 onclick='c(this)'> blah
<td><input type=checkbox id=r3c2 onclick='c(this)'> blah
<td><input type=checkbox id=r3c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r4c0 onclick='c(this)'> blah
<td><input type=checkbox id=r4c1 onclick='c(this)'> blah
<td><input type=checkbox id=r4c2 onclick='c(this)'> blah
<td><input type=checkbox id=r4c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r5c0 onclick='c(this)'> blah
<td><input type=checkbox id=r5c1 onclick='c(this)'> blah
<td><input type=checkbox id=r5c2 onclick='c(this)'> blah
<td><input type=checkbox id=r5c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r6c0 onclick='c(this)'> blah
<td><input type=checkbox id=r6c1 onclick='c(this)'> blah
<td><input type=checkbox id=r6c2 onclick='c(this)'> blah
<td><input type=checkbox id=r6c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r7c0 onclick='c(this)'> blah
<td><input type=checkbox id=r7c1 onclick='c(this)'> blah
<td><input type=checkbox id=r7c2 onclick='c(this)'> blah
<td><input type=checkbox id=r7c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r8c0 onclick='c(this)'> blah
<td><input type=checkbox id=r8c1 onclick='c(this)'> blah
<td><input type=checkbox id=r8c2 onclick='c(this)'> blah
<td><input type=checkbox id=r8c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r9c0 onclick='c(this)'> blah
<td><input type=checkbox id=r9c1 onclick='c(this)'> blah
<td><input type=checkbox id=r9c2 onclick='c(this)'> blah
<td><input type=checkbox id=r9c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r10c0 onclick='c(this)'> blah
<td><input type=checkbox id=r10c1 onclick='c(this)'> blah
<td><input type=checkbox id=r10c2 onclick='c(this)'> blah
<td><input type=checkbox id=r10c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r11c0 onclick='c(this)'> blah
<td><input type=checkbox id=r11c1 onclick='c(this)'> blah
<td><input type=checkbox id=r11c2 onclick='c(this)'> blah
<td><input type=checkbox id=r11c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td>total <span id=c0>0</span>
<td>total <span id=c1>0</span>
<td>total <span id=c2>0</span>
<td>total <span id=c3>0</span>
</table>
</table>
<script type='text/javascript'>
function g(x){
return document.getElementById(x)
}
function c(x){
my = x.id
myRow = my.substr(1,1)
myCol = my.substr(3,1)
// only one or less checked this row:
if (x.checked)
for (var c=0;c<4;c++)
if (c!=myCol)
g('r'+myRow+'c'+c).checked=false;
// recomputes the 4 columns:
for (c=0;c<4;c++){
t=0
for (r=0;r<12;r++){
if (g('r'+r+'c'+c).checked)
t++
g('c'+c).innerHTML=t
}
}
}
</script>
</body>
</html>
A few weeks ago a nice man called Evertjan helped me create a form
validation system that took a table of four columns of checkboxes and:
- allowed only one checkbox in each row to be checked
- totalised the number of checked boxes in each column
The system works fine until you have more than 10 rows, at which point
the myrow substr(1,1) fails to correctly identify the row number
because it needs to extract two characters instead of one, and the
mycol substr also then doesn't work.
I'm a noob at javascript, so I'd really appreciate any help in adapting
the code (below). It works fine up until row 10, then it goes
pear-shaped.
Thanks in advance for any help.
TP
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>
<body>
<table border=0>
<tr><td width="366">
<table>
<tr>
<td><input type=checkbox id=r0c0 onclick='c(this)'> blah
<td><input type=checkbox id=r0c1 onclick='c(this)'> blah
<td><input type=checkbox id=r0c2 onclick='c(this)'> blah
<td><input type=checkbox id=r0c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r1c0 onclick='c(this)'> blah
<td><input type=checkbox id=r1c1 onclick='c(this)'> blah
<td><input type=checkbox id=r1c2 onclick='c(this)'> blah
<td><input type=checkbox id=r1c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r2c0 onclick='c(this)'> blah
<td><input type=checkbox id=r2c1 onclick='c(this)'> blah
<td><input type=checkbox id=r2c2 onclick='c(this)'> blah
<td><input type=checkbox id=r2c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r3c0 onclick='c(this)'> blah
<td><input type=checkbox id=r3c1 onclick='c(this)'> blah
<td><input type=checkbox id=r3c2 onclick='c(this)'> blah
<td><input type=checkbox id=r3c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r4c0 onclick='c(this)'> blah
<td><input type=checkbox id=r4c1 onclick='c(this)'> blah
<td><input type=checkbox id=r4c2 onclick='c(this)'> blah
<td><input type=checkbox id=r4c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r5c0 onclick='c(this)'> blah
<td><input type=checkbox id=r5c1 onclick='c(this)'> blah
<td><input type=checkbox id=r5c2 onclick='c(this)'> blah
<td><input type=checkbox id=r5c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r6c0 onclick='c(this)'> blah
<td><input type=checkbox id=r6c1 onclick='c(this)'> blah
<td><input type=checkbox id=r6c2 onclick='c(this)'> blah
<td><input type=checkbox id=r6c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r7c0 onclick='c(this)'> blah
<td><input type=checkbox id=r7c1 onclick='c(this)'> blah
<td><input type=checkbox id=r7c2 onclick='c(this)'> blah
<td><input type=checkbox id=r7c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r8c0 onclick='c(this)'> blah
<td><input type=checkbox id=r8c1 onclick='c(this)'> blah
<td><input type=checkbox id=r8c2 onclick='c(this)'> blah
<td><input type=checkbox id=r8c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r9c0 onclick='c(this)'> blah
<td><input type=checkbox id=r9c1 onclick='c(this)'> blah
<td><input type=checkbox id=r9c2 onclick='c(this)'> blah
<td><input type=checkbox id=r9c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r10c0 onclick='c(this)'> blah
<td><input type=checkbox id=r10c1 onclick='c(this)'> blah
<td><input type=checkbox id=r10c2 onclick='c(this)'> blah
<td><input type=checkbox id=r10c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td><input type=checkbox id=r11c0 onclick='c(this)'> blah
<td><input type=checkbox id=r11c1 onclick='c(this)'> blah
<td><input type=checkbox id=r11c2 onclick='c(this)'> blah
<td><input type=checkbox id=r11c3 onclick='c(this)'> blah
</table>
<tr><td>
<table>
<tr>
<td>total <span id=c0>0</span>
<td>total <span id=c1>0</span>
<td>total <span id=c2>0</span>
<td>total <span id=c3>0</span>
</table>
</table>
<script type='text/javascript'>
function g(x){
return document.getElementById(x)
}
function c(x){
my = x.id
myRow = my.substr(1,1)
myCol = my.substr(3,1)
// only one or less checked this row:
if (x.checked)
for (var c=0;c<4;c++)
if (c!=myCol)
g('r'+myRow+'c'+c).checked=false;
// recomputes the 4 columns:
for (c=0;c<4;c++){
t=0
for (r=0;r<12;r++){
if (g('r'+r+'c'+c).checked)
t++
g('c'+c).innerHTML=t
}
}
}
</script>
</body>
</html>