Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Trying to totalise and validate form

timothy.pollard@btinternet.com
Guest
  
Posts: n/a
#1: Jul 8 '06
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[i].checked) {total += +(elems[i].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[i].checked) {total += +(elems[i].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[i].checked) {total += +(elems[i].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[i].checked) {total += +(elems[i].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>
Marc
Guest
  
Posts: n/a
#2: Jul 8 '06

re: Trying to totalise and validate form

>
Quote:
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.
>
what the... is this questionnaire weekend?
Evertjan.
Guest
  
Posts: n/a
#3: Jul 8 '06

re: Trying to totalise and validate form

wrote on 08 jul 2006 in comp.lang.javascript:
Quote:
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.
>
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>





--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
timothy.pollard@btinternet.com
Guest
  
Posts: n/a
#4: Jul 8 '06

re: Trying to totalise and validate form

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>
Evertjan.
Guest
  
Posts: n/a
#5: Jul 8 '06

re: Trying to totalise and validate form

wrote on 08 jul 2006 in comp.lang.javascript:
Quote:
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....
>
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++)


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
timothy.pollard@btinternet.com
Guest
  
Posts: n/a
#6: Jul 13 '06

re: Trying to totalise and validate form


Evertjan. wrote:
Quote:
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++)
>
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
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,358 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved