AJAX

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2005

Posts: 33

Reputation: edmicman is an unknown quantity at this point

Solved Threads: 0

edmicman

Offline

Light Poster

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

Sep 12th, 2007

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:

 Help with Code Tags 
 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!

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

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

Sep 13th, 2007

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

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

Daylight-saving time uses more gasoline

•

Join Date: Oct 2005

Posts: 33

Reputation: edmicman is an unknown quantity at this point

Solved Threads: 0

edmicman

Offline

Light Poster

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

Sep 14th, 2007

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...

•

Join Date: Jun 2006

Posts: 7,636

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 470

~s.o.s~

Offline

Failure as a human

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

Sep 14th, 2007

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

Test.html

 Help with Code Tags 
 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

 Help with Code Tags 
 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

 Help with Code Tags 
 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;
}

I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De