473,288 Members | 1,704 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,288 software developers and data experts.

Problems with form validation

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>

Aug 1 '06 #1
4 1353

ti*************@btinternet.com wrote:
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>
I'm going to offer two answers to this.
The short (wrong though it works) answer could be to replace:
myRow = my.substr(1,1)
myCol = my.substr(3,1)
with the following:
var colRowRE = new RegExp("r(\\d+)c(\\d+)");
colRowRE.exec(my);
var myRow = RegExp.$1;
var myCol = RegExp.$2;

The longer better answer is to change what you are doing.
Whether or not to use xhtml is a subject for debate. However, if don't
mark your code as xhtml if its not compliant.
Making it correct would be a good starting point then, making it
somewhat sematic and ditching the nested tables would be a good start
down the right path.
I'm going to offer up the following as an alternative starting point.
Maybe a more experienced javascript guru will post some code as an
improvement to this.

<!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">
table{
border: 0px;
width: 266px;
}
tr {
border: 0px;
}
td {
border: 0px;
}
label {
margin: 0px;
padding: 0px;
}
</style>

<script type="text/javascript">
// <![CDATA[
function ensureRowUniq(){
var parentRow = findParentTag(this,"tr");
var boxes = parentRow.getElementsByTagName("input");
for(var i=0;i<boxes.length;i++){
var currentCB = boxes[i];
if(currentCB != this){
currentCB.checked=false;
}
}
updateTally();
}

function updateTally(){
var myTable = bindEvents2Table.table;
var tallyNodes =
myTable.getElementsByTagName("tfoot")[0].getElementsByTagName("span");
var colCount = tallyNodes.length;
var counts = new Array(colCount);
for(var i=0; i<counts.length;i++){
counts[i] = 0;
}
var rows =
myTable.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
var currentTr = rows[i];
var boxes = currentTr.getElementsByTagName("input");
for(var j=0; j<boxes.length;j++){
if(boxes[j].checked){
counts[j]+=1;
}
}
}
var ret = "";
for(var i=0; i<tallyNodes.length;i++){
var curNode = tallyNodes[i];
var countNode = document.createTextNode(counts[i]);
curNode.replaceChild(countNode,curNode.childNodes[0]);
}
}

function findParentTag(elem,tagName){
var parent = elem.parentNode;
if(parent && parent.tagName.toLowerCase()!=tagName.toLowerCase( )){
parent = findParentTag(parent,tagName);
}
return parent;
}

function bindEvents2Table(){
var myTable = document.getElementById("tblUniqRows");
arguments.callee.table = myTable;
var boxes = myTable.getElementsByTagName("input");
for(var i=0; i<boxes.length;i++){
boxes[i].onclick=ensureRowUniq;
}
}

window.onload=bindEvents2Table;
// ]]>
</script>

</head>

<body>
<form action="#">
<table id="tblUniqRows">
<tfoot>
<tr>
<td>Total: <span>0</span></td>
<td>Total: <span>0</span></td>
<td>Total: <span>0</span></td>
<td>Total: <span>0</span></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
<tr>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
<td><label><input type="checkbox" /blah</label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Aug 1 '06 #2
Paul

Many thanks for your help - I've tried the 'wrong' fix and it works
fine, as you say. I'm intrigued to know why you call it wrong, though?

The spurious code was added in by Dreamweaver when I did some changes
that way.

I'll have a go at the alternative version later, when I've got some
more time.

Many thanks again for your help.

TP

Aug 2 '06 #3

ti*************@btinternet.com wrote:
Paul

Many thanks for your help - I've tried the 'wrong' fix and it works
fine, as you say. I'm intrigued to know why you call it wrong, though?
I think, using a naming convention to establish the relationship
between elements is asking for trouble. Especially when html gives you
the means to establish the semantic of columns and rows.
>
The spurious code was added in by Dreamweaver when I did some changes
that way.

I'll have a go at the alternative version later, when I've got some
more time.

Many thanks again for your help.
no problem
>
TP
Aug 2 '06 #4
JRS: In article <11*********************@i42g2000cwa.googlegroups. com>,
dated Tue, 1 Aug 2006 07:56:05 remote, seen in
news:comp.lang.javascript, ti*************@btinternet.com posted :
>
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.
simple change : Instead of "naming" them from 0 upwards, start at 10.
You'll then have 90 rows before needing more characters. If that's not
enough, start at 100 ... . Change the substr parameters accordingly, of
course.
If your page requires javascript in order to function, consider using
javascript to write the rather repetitive form structure, using loops.

Read the newsgroup FAQ.
--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Aug 2 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Suzanne Murray | last post by:
Hi, I am trying to provide some simple validation using Javascript on my form. However at times the validation works and at others it doesn't and submits the form without any warnings even...
3
by: Mark Morton | last post by:
I'm writing an if statement for a UK credit card form validation script. Users who specify that their card is Switch need to enter either the issue number or the 'valid from' date. I'm trying to...
1
by: googleboy | last post by:
Hi. I am writing up my own web form. I'm a bit of a newb, and read up many different how-tos and examples and documentaion. I finally had it working just great until I decided that I wanted to...
3
by: hplloyd | last post by:
I am writing a windows application based on a set of generic user controls that I have developed. I have a user control called "ctlInputText" that has a label, textbox and error provider. The...
3
by: Rick | last post by:
I have an interesting problem when I run the following code in Netscape (7.02) vs. IE. This page works great in IE and all my controls bring up the validation summary dialog box if the required...
3
by: Arun K | last post by:
Hi, I am creating a simple .aspx page to add some fields with validation. I have used different .NET validations like REquiredFieldValidator, RegularExpressionValidator and showed the summary...
1
by: John Slate | last post by:
I have built a simple form that uses input validation. I use the EnableClientScript option to produce a javascript alert box when input errors occur. The only validation is a password confirmation...
3
by: Rob Bradford | last post by:
All. I'm fairly new to VB.Net, and VB in general so please bear with me. I have form with two or three controls that require validation on exit. I have done this by using the "leave" event of...
1
by: Louis | last post by:
I hope this is a right forum for my problem...( I also posted this on alt.comp.lang.javascript) I used javascript and DOM to create dynamically nested <form>/<div>/<inputetc inside a wrapper...
2
by: Epetruk | last post by:
Hello, I have an ASP.NET page which consists of a button (cmdSave), a label (lblMessage), a text field (txtName) and a custom validator (vldName). vldName is supposed to do both client *and*...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.