Checking selections made in a checkbox list

[Menelty]

I have 2 datagrids on my page and each one has a template column which
has a checkbox relating to each specific row. I usually have one on
the page and use javascript to make sure there has been x number of
selections before allowing the user to proceed. I use the code below
for this:

for (var n=0; n < document.forms[0].length; n++)
{
if (document.forms[0].elements[n].type=='checkbox')
{
if (document.forms[0].elements[n].checked)
{
i++;
}
}
}

How can I make sure there has been a selection made in each of the 2
separate datagrids as my old way checks the entire page only? I am
thinking I can specifically name the datagrid I want to check but cant
remember how to do it.
Am looking for a quick solution as short on time.

Thanks.

 

[Grant Wagner]

I have 2 datagrids on my page and each one has a template column which
has a checkbox relating to each specific row. I usually have one on
the page and use javascript to make sure there has been x number of
selections before allowing the user to proceed. I use the code below
for this:

for (var n=0; n < document.forms[0].length; n++)
{
if (document.forms[0].elements[n].type=='checkbox')
{
if (document.forms[0].elements[n].checked)
{
i++;
}
}
}

How can I make sure there has been a selection made in each of the 2
separate datagrids as my old way checks the entire page only? I am
thinking I can specifically name the datagrid I want to check but cant
remember how to do it.
Am looking for a quick solution as short on time.

Thanks.

Name the inputs in a way that uniquely identifies them:

<input type="checkbox" name="grid1_One">
<input type="checkbox" name="grid1_Two">
<!-- etc -->
and
<input type="checkbox" name="grid2_One">
<input type="checkbox" name="grid2_Two">
<!-- etc -->

And then count each "grid#_" set separately:

function countGridsChecked() {
var f = document.forms['theForm'].elements;
var theGrids = new Object();
var reGridIdentifier = /^(grid\d+)_/;
for (var n=0; n < f.length; n++) {
if (f[n].type=='checkbox' &&
reGridIndentifier.test(f[n].name) &&
f[n].checked) {

// it's a checkbox;
// and it's name is "grid#_..."
// and it's checked

if (theGrids[RegExp.$1]) {
// counted at least one in this "grid#_..."
// increment the count
theGrids[RegExp.$1]++;
} else {
// never counted anything in this "grid#_..."
// count the first one
theGrids[RegExp.$1] = 1;
}
}

// return the object
// theGrids['grid1'], theGrids['grid2'], etc
return theGrids;
}

Now you can run:

var theCounts = countGridsChecked();
if (theCounts['grid1']) {
// the count of "grid1" is non-null and non-zero
} else {
// the count of "grid1" is null or zero
}

This scales nicely because you can add addition "grids" by simply creating
another set of checkboxes, the function itself would simply create another
property on the returned object which you could test.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Stephen Chalmers]

I have 2 datagrids on my page and each one has a template column which
has a checkbox relating to each specific row. I usually have one on
the page and use javascript to make sure there has been x number of
selections before allowing the user to proceed. I use the code below
for this:

for (var n=0; n < document.forms[0].length; n++)
{
if (document.forms[0].elements[n].type=='checkbox')
{
if (document.forms[0].elements[n].checked)
{
i++;
}
}
}

How can I make sure there has been a selection made in each of the 2
separate datagrids as my old way checks the entire page only? I am
thinking I can specifically name the datagrid I want to check but cant
remember how to do it.
Am looking for a quick solution as short on time.

Thanks.

Give all the checkboxes in each set the same unique name, then have your
function scan for that name in all the elements of a named form.

function cbCounter(formName, rangeName)
{
var fe=document.forms[formName].elements, count=0;

for( var i=0; i<fe.length; i++)
if( fe.name==rangeName && fe.type=='checkbox' && fe.checked )
count++;

return count;
}

So say you had a form called "form1" containing a set of checkboxes named
"grid1", you could count the number checked with:

n = cbCounter("form1","grid1");