Trying to totalise and validate form

  • Thread starter timothy.pollard
  • Start date
T

timothy.pollard

Hi

I'm having a bit of bother trying to make a questionnaire do what I
want it to. I have put it up on www.web-iq.co.uk/test.htm.

Basically the user of the final form (when I've tarted it up) will have
to choose 1 answer per line, which are added up in the totals below.
I've made four separate forms each of which totalises the number of
checked elements in it - ie. column one is its own form, similarly
column 2 etc.

All this is fine but at the moment the user can choose more than one
answer per row, which distorts the totals.

I tried experimenting with radiobuttons instead, but couldn't make it
work with unchecking.

I'm not great at javascript, so any help appreciated.

Page code below.

Thanks - Tim P

<!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>
<style type="text/css">
<!--
body {
background-color: #CCCCFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function calculate2() {
var elems = document.forms['form2'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems.checked) {total += +(elems.value);}
}
elems['Tot1'].value = total;
}
function calculate3() {
var elems = document.forms['form3'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems.checked) {total += +(elems.value);}
}
elems['Tot2'].value = total;
}
function calculate4() {
var elems = document.forms['form4'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems.checked) {total += +(elems.value);}
}
elems['Tot3'].value = total;
}
function calculate5() {
var elems = document.forms['form5'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems.checked) {total += +(elems.value);}
}
elems['Tot4'].value = total;
}
//-->
</script>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><form action="" method="post" name="form2"
id="form2">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#fff76a"><div align="center">ONE</div></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb1-1" type="checkbox"
onclick="calculate2()" id="cb1" value="1" /></td>
<td width="76%" class="smalltext">Boasts and brags </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb2-1" type="checkbox"
onclick="calculate2()" id="cb2-1" value="1" /></td>
<td width="76%" class="smalltext">Dominates</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb3-1" type="checkbox"
onclick="calculate2()" id="cb3-1" value="1" /></td>
<td width="76%" class="smalltext">Interrupts</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb4-1" type="checkbox"
onclick="calculate2()" id="cb4-1" value="1" /></td>
<td width="76%" class="smalltext">Self centered </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb5-1" type="checkbox"
onclick="calculate2()" id="cb5-1" value="1" /></td>
<td width="76%" class="smalltext">Focus on own success
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb6-1" type="checkbox"
onclick="calculate2()" id="cb6-1" value="1" /></td>
<td width="76%" class="smalltext">Strong views </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb7-1" type="checkbox"
onclick="calculate2()" id="cb7-1" value="1" /></td>
<td width="76%" class="smalltext">Negative statements
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb8-1" type="checkbox"
onclick="calculate2()" id="cb8-1" value="1" /></td>
<td width="76%" class="smalltext">Values status </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb9-1" type="checkbox"
onclick="calculate2()" id="cb9-1" value="1" /></td>
<td width="76%" class="smalltext">Rarely gives credit
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb10-1" type="checkbox"
onclick="calculate2()" id="cb10-1" value="1" /></td>
<td width="76%" class="smalltext">Strong desire to win
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb11-1" type="checkbox"
onclick="calculate2()" id="cb11-1" value="1" /></td>
<td width="76%" class="smalltext">Likes status symbols
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb12-1" type="checkbox"
onclick="calculate2()" id="cb12-1" value="1" /></td>
<td width="76%" class="smalltext">Keen for an argument
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFF76A">&nbsp;&nbsp;Total
<input name="Tot1" type="text" id="Tot1" size="2" /></td>
</tr>
</table>
</form></td>
<td width="25%"><form action="" method="post" name="form3"
id="form3">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#fff76a"><div align="center">TWO</div></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb1-2" type="checkbox"
onclick="calculate3()" id="cb1-2" value="1" /></td>
<td width="76%" class="smalltext">Lacks confidence </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb2-2" type="checkbox"
onclick="calculate3()" id="cb2-2" value="1" /></td>
<td width="76%" class="smalltext">Tight lipped and closed
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb3-2" type="checkbox"
onclick="calculate3()" id="cb3-2" value="1" /></td>
<td width="76%" class="smalltext">Cautious</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb4-2" type="checkbox"
onclick="calculate3()" id="cb4-2" value="1" /></td>
<td width="76%" class="smalltext">Sits on the fence </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb5-2" type="checkbox"
onclick="calculate3()" id="cb5-2" value="1" /></td>
<td width="76%" class="smalltext">Procrastinates</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb6-2" type="checkbox"
onclick="calculate3()" id="cb6-2" value="1" /></td>
<td width="76%" class="smalltext">Indecisive</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb7-2" type="checkbox"
onclick="calculate3()" id="cb7-2" value="1" /></td>
<td width="76%" class="smalltext">Follows the leader
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb8-2" type="checkbox"
onclick="calculate3()" id="cb8-2" value="1" /></td>
<td width="76%" class="smalltext">Keeps a low profile
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb9-2" type="checkbox"
onclick="calculate3()" id="cb9-2" value="1" /></td>
<td width="76%" class="smalltext">Prefers solitude </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb10-2" type="checkbox"
onclick="calculate3()" id="cb10-2" value="1" /></td>
<td width="76%" class="smalltext">Works by the book </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb11-2" type="checkbox"
onclick="calculate3()" id="cb11-2" value="1" /></td>
<td width="76%" class="smalltext">Values tradition </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb12-2" type="checkbox"
onclick="calculate3()" id="cb12-2" value="1" /></td>
<td width="76%" class="smalltext">Pessimism</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFF76A">&nbsp;&nbsp;Total
<input name="Tot2" type="text" id="Tot2" size="2" /></td>
</tr>
</table>
</form></td>
<td width="25%"><form action="" method="post" name="form4"
id="form4">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#fff76a"><div align="center">THREE</div></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb1-3" type="checkbox"
onclick="calculate4()" id="cb1-3" value="1" /></td>
<td width="76%" class="smalltext">Easy to get along with
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb2-3" type="checkbox"
onclick="calculate4()" id="cb2-3" value="1" /></td>
<td width="76%" class="smalltext">Agrees readily </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb3-3" type="checkbox"
onclick="calculate4()" id="cb3-3" value="1" /></td>
<td width="76%" class="smalltext">Positive and optimistic
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb4-3" type="checkbox"
onclick="calculate4()" id="cb4-3" value="1" /></td>
<td width="76%" class="smalltext">Talks a lot </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb5-3" type="checkbox"
onclick="calculate4()" id="cb5-3" value="1" /></td>
<td width="76%" class="smalltext">Goes off on a tangent
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb6-3" type="checkbox"
onclick="calculate4()" id="cb6-3" value="1" /></td>
<td width="76%" class="smalltext">Rarely criticises </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb7-3" type="checkbox"
onclick="calculate4()" id="cb7-3" value="1" /></td>
<td width="76%" class="smalltext">Disorganised</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb8-3" type="checkbox"
onclick="calculate4()" id="cb8-3" value="1" /></td>
<td width="76%" class="smalltext">Positive statements
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb9-3" type="checkbox"
onclick="calculate4()" id="cb9-3" value="1" /></td>
<td width="76%" class="smalltext">Sensitive to feedback
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb10-3" type="checkbox"
onclick="calculate4()" id="cb10-3" value="1" /></td>
<td width="76%" class="smalltext">Exaggerates</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb11-3" type="checkbox"
onclick="calculate4()" id="cb11-3" value="1" /></td>
<td width="76%" class="smalltext">Compromises</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb12-3" type="checkbox"
onclick="calculate4()" id="cb12-3" value="1" /></td>
<td width="76%" class="smalltext">Indecisive</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFF76A">&nbsp;&nbsp;Total
<input name="Tot3" type="text" id="Tot3" size="2" /></td>
</tr>
</table>
</form></td>
<td width="25%"><form action="" method="post" name="form5"
id="form5">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#fff76a"><div align="center">FOUR</div></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb1-4" type="checkbox"
onclick="calculate5()" id="cb1-4" value="1" /></td>
<td width="76%" class="smalltext">Self confident </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb2-4" type="checkbox"
onclick="calculate5()" id="cb2-4" value="1" /></td>
<td width="76%" class="smalltext">Team player </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb3-4" type="checkbox"
onclick="calculate5()" id="cb3-4" value="1" /></td>
<td width="76%" class="smalltext">Willingly accepts help
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb4-4" type="checkbox"
onclick="calculate5()" id="cb4-4" value="1" /></td>
<td width="76%" class="smalltext">Candid and thorough
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb5-4" type="checkbox"
onclick="calculate5()" id="cb5-4" value="1" /></td>
<td width="76%" class="smalltext">Open to new ideas</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb6-4" type="checkbox"
onclick="calculate5()" id="cb6-4" value="1" /></td>
<td width="76%" class="smalltext">Listens first </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb7-4" type="checkbox"
onclick="calculate5()" id="cb7-4" value="1" /></td>
<td width="76%" class="smalltext">Gives credit when due
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb8-4" type="checkbox"
onclick="calculate5()" id="cb8-4" value="1" /></td>
<td width="76%" class="smalltext">Owns up to mistakes
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb9-4" type="checkbox"
onclick="calculate5()" id="cb9-4" value="1" /></td>
<td width="76%" class="smalltext">Explains fully </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb10-4" type="checkbox"
onclick="calculate5()" id="cb10-4" value="1" /></td>
<td width="76%" class="smalltext">Balanced reasoning
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb11-4" type="checkbox"
onclick="calculate5()" id="cb11-4" value="1" /></td>
<td width="76%" class="smalltext">Looks for win/win </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFFFFF"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%"><input name="cb12-4" type="checkbox"
onclick="calculate5()" id="cb12-4" value="1" /></td>
<td width="76%" class="smalltext">Supports others </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" bgcolor="#FFF76A">&nbsp;&nbsp;Total
<input name="Tot4" type="text" id="Tot4" size="2" /></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>
 
E

Evertjan.

wrote on 08 jul 2006 in comp.lang.javascript:
I'm having a bit of bother trying to make a questionnaire do what I
want it to. I have put it up on www.web-iq.co.uk/test.htm.

Basically the user of the final form (when I've tarted it up) will have
to choose 1 answer per line, which are added up in the totals below.
I've made four separate forms each of which totalises the number of
checked elements in it - ie. column one is its own form, similarly
column 2 etc.

All this is fine but at the moment the user can choose more than one
answer per row, which distorts the totals.

I tried experimenting with radiobuttons instead, but couldn't make it
work with unchecking.

I'm not great at javascript, so any help appreciated.
Click to expand...

The first thing you have to do if thngs go bad,
is make a clean code you can grasp,
leaving out all the unneccesary parts.

Try this:

<table border=1>
<tr><td>

<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
</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
</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
</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
</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>
</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<3;c++)
if (c!=myCol)
g('r'+myRow+'c'+c).checked=false;

// recomputes the 3 columns:
for (c=0;c<3;c++){
t=0
for (r=0;r<4;r++){
if (g('r'+r+'c'+c).checked)
t++
g('c'+c).innerHTML=t
}
}

}

</script>
 
T

timothy.pollard

Thanks Evertjan

This works great!

I've extended it to 10 rows and 4 cols with no problem (i.e. last row
is 9). But when I go to 12 rows the last two don't select only one col
correctly. I can't see why this would be from your code - not that i'm
much cop at javascript....

I have a feeling it is the substring method on MyRow which is doing
this because sometimes I want to extract 2 chars and sometimes 1?

Sorry to be a pain, but can you see what I'm doing wrong?

Thanks again for your help.

<!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>
 
E

Evertjan.

wrote on 08 jul 2006 in comp.lang.javascript:
I've extended it to 10 rows and 4 cols with no problem (i.e. last row
is 9). But when I go to 12 rows the last two don't select only one col
correctly. I can't see why this would be from your code - not that i'm
much cop at javascript....
Click to expand...

Use double number rows starting at 10:

id=r10c3
id=r11c3

myRow = my.substr(1,2)
myCol = my.substr(4,1)


for (r=10;r<22;r++)
 
T

timothy.pollard

Evertjan. said:
Use double number rows starting at 10:

id=r10c3
id=r11c3

myRow = my.substr(1,2)
myCol = my.substr(4,1)


for (r=10;r<22;r++)
Click to expand...

Hi Evertjan

Thanks for the reply - sorry I didn't thank you before - I've been away
and only got time to try out this code this morning.

As I said, I'm not good at javascript and I can't figure how to make
this work. I need the original definition of myRow and myCol for rows
1-10, so where do I put the new code please?

Sorry to be a nuisance and thanks again for your help.

Regards

TimP
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image shifts to the right when export the page to pdf 4
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
Nested Loop Insert Page Break 1
Can anyone please help? HTML - two tables applying different styles 4

Members online

Total: 28 (members: 2, guests: 26)
Robots: 497

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top