Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 5692

Sep 12th, 2007

need help requiring at least one checkbox from group to be selected

Expand Post »

I'm using classic ASP here, and trying to do some Javascript validation.

In my form, I'm dynamically creating checkbox groups - each group has a common Name, and each checkbox has a unique ID. Before the form submits (in the onclick on the submit button) I want to check and make sure each checkbox group has at least one of it's checkboxes checked. If that makes sense :-)

I guess I'm conceptually running into problems. I think I want to, on submit, loop through all of the checkbox Names, and make sure at least one item is checked out of each of those Name groups. Can this be done? This is what I have so far, but I think it's getting thrown off by using the ID instead of the Name:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function validateCheckBox()
{
	var checkSelected = false;
	var checkboxid
 
	for(i=0; i<document.frmEditCoverages.elements.length; i++)
	{
		if(document.frmEditCoverages.elements[i].type=="checkbox")
		{
			/*need to do this for each checkbox on the page*/
			checkboxid = document.frmEditCoverages.elements[i]; 
			for (i = 0;  i < checkboxid.length;  i++){
			  if (checkboxid[i].checked){
			    checkSelected = true;
			  }
			}
			if (!checkSelected){
			  alert("WARNING MESSAGE TELLING THEM TO CHECK A CHECKBOX.");
			  return (false);
			}	
		}		
	}
 
}
function validateCheckBox()
{
	var checkSelected = false;
	var checkboxid
	
	for(i=0; i<document.frmEditCoverages.elements.length; i++)
	{
		if(document.frmEditCoverages.elements[i].type=="checkbox")
		{
			/*need to do this for each checkbox on the page*/
			checkboxid = document.frmEditCoverages.elements[i]; 
			for (i = 0;  i < checkboxid.length;  i++){
			  if (checkboxid[i].checked){
			    checkSelected = true;
			  }
			}
			if (!checkSelected){
			  alert("WARNING MESSAGE TELLING THEM TO CHECK A CHECKBOX.");
			  return (false);
			}	
		}		
	}

}

Any help or advice? Thanks!

Similar Threads

how to get value of all selected checkbox? in ASP.NET
Keeping track of the checkboxes selected acrros the page in PHP
You Can Bypass the Recycle Bin on the Fly in Windows tips 'n' tweaks
Code help in Java

edmicman

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

33 posts
since Oct 2005

Permalink

Sep 13th, 2007

Re: need help requiring at least one checkbox from group to be selected

Shouldn't you return a value of true if a box is selected?

Also, you are returning before you check all of the boxes.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Sep 14th, 2007

Re: need help requiring at least one checkbox from group to be selected

Well, yeah, I probably need to return checkSelected or something. Errrrr, actually, it probably would work if it popped the warning for each one, and then returned for that one. Ideally I'd focus on that element so they can select it. But shouldn't the FOR loop through all the elements hit all the checkboxes?

I guess what I want to do is loop through all of the checkboxes on the page, but name instead of ID so I can get the groups of checkboxes. And if at least one box isn't checked for each group, I want to pop the message. Sigh....I shouldn't be struggling with this as much as I am

I'll try breaking it down some more and see what I can do...

edmicman

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

33 posts
since Oct 2005

Permalink

Sep 14th, 2007

Re: need help requiring at least one checkbox from group to be selected

You need to have a basic understanding of Javascript objects for understanding the solution presented below:

Test.html

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel = "stylesheet" href = "Styles.css" media = "all" type = "text/css" />
<title>sample page</title>
</head>
<body id = "myBody">
    <noscript>Your browser doesn't support javascript. Be prepared for broken site functionality...</noscript>
    <form id = "myForm" action = "">
    <div id = "myDiv">
        <fieldset>
        <legend>First</legend>
        <input type = "checkbox" name = "first" id = "first" value = "1" /><label for = "first">One</label><br />
        <input type = "checkbox" name = "first" id = "second" value = "2" /><label for = "second">Two</label><br />
        <input type = "checkbox" name = "first" id = "third" value = "3" /><label for = "third">Three</label><br />
        </fieldset>
        <br /><br />
 
        <fieldset>
        <legend>Second</legend>
        <input type = "checkbox" name = "second" id = "four" value = "4" /><label for = "four">Four</label><br />
        <input type = "checkbox" name = "second" id = "five" value = "5" /><label for = "five">Five</label><br />
        </fieldset>
        <br /><br />
 
        <fieldset>
        <legend>Third</legend>
        <input type = "checkbox" name = "third" id = "six" value = "6" /><label for = "six">Six</label><br />
        <input type = "checkbox" name = "third" id = "seven" value = "7" /><label for = "seven">Seven</label><br />
        </fieldset>
        <br /><br />        
    </div>
    <input type = "submit" value = "Check validity" id = "btn" onclick = "SOS.validate('myDiv');" />
    </form>
<script type = "text/javascript" src = "Lib.js"></script>
</body>
</html>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel = "stylesheet" href = "Styles.css" media = "all" type = "text/css" />
<title>sample page</title>
</head>
<body id = "myBody">
    <noscript>Your browser doesn't support javascript. Be prepared for broken site functionality...</noscript>
    <form id = "myForm" action = "">
    <div id = "myDiv">
        <fieldset>
        <legend>First</legend>
        <input type = "checkbox" name = "first" id = "first" value = "1" /><label for = "first">One</label><br />
        <input type = "checkbox" name = "first" id = "second" value = "2" /><label for = "second">Two</label><br />
        <input type = "checkbox" name = "first" id = "third" value = "3" /><label for = "third">Three</label><br />
        </fieldset>
        <br /><br />
        
        <fieldset>
        <legend>Second</legend>
        <input type = "checkbox" name = "second" id = "four" value = "4" /><label for = "four">Four</label><br />
        <input type = "checkbox" name = "second" id = "five" value = "5" /><label for = "five">Five</label><br />
        </fieldset>
        <br /><br />
        
        <fieldset>
        <legend>Third</legend>
        <input type = "checkbox" name = "third" id = "six" value = "6" /><label for = "six">Six</label><br />
        <input type = "checkbox" name = "third" id = "seven" value = "7" /><label for = "seven">Seven</label><br />
        </fieldset>
        <br /><br />        
    </div>
    <input type = "submit" value = "Check validity" id = "btn" onclick = "SOS.validate('myDiv');" />
    </form>
<script type = "text/javascript" src = "Lib.js"></script>
</body>
</html>

Libs.js

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var SOS = 
{
    validate : function(id)
    {
        var obj = {};
        var element = null;
        var myDiv = document.getElementById(id);
        var elements = myDiv.getElementsByTagName('input');
 
        for(var i = 0, limit = elements.length; i < limit; ++i)
        {
            element = elements[i];
            obj[element.name] = !!(obj[element.name] || element.checked);
        }
 
        for(var prop in obj)
        {
            if(obj[prop] == false)
            {
                alert('Check at least one box in the group ' + prop.toUpperCase());
                return(false);
            }
        }
        alert('Form successfully submitted');
        return(true);
    }
}
var SOS = 
{
    validate : function(id)
    {
        var obj = {};
        var element = null;
        var myDiv = document.getElementById(id);
        var elements = myDiv.getElementsByTagName('input');
        
        for(var i = 0, limit = elements.length; i < limit; ++i)
        {
            element = elements[i];
            obj[element.name] = !!(obj[element.name] || element.checked);
        }
        
        for(var prop in obj)
        {
            if(obj[prop] == false)
            {
                alert('Check at least one box in the group ' + prop.toUpperCase());
                return(false);
            }
        }
        alert('Form successfully submitted');
        return(true);
    }
}

Styles.css

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
#myDiv
{
    width: 20%;
}
#myDiv legend
{
    color: #ababab;
    font-weight: bold;
}
 
#myDiv fieldset
{
    background-color: #efefef;
}
 
#btn
{
    border: 1px #aabbcc solid;
}
#myDiv
{
    width: 20%;
}
#myDiv legend
{
    color: #ababab;
    font-weight: bold;
}

#myDiv fieldset
{
    background-color: #efefef;
}

#btn
{
    border: 1px #aabbcc solid;
}

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Problem in Ajax

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: "Must visit from" javascript wont work in IE...

DaniWeb Message

Cancel Changes

User Name
Password