User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,485 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,780 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2718 | Replies: 3
Reply
Join Date: Oct 2005
Posts: 27
Reputation: edmicman is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
edmicman's Avatar
edmicman edmicman is offline Offline
Light Poster

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

  #1  
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:
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!
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jan 2007
Posts: 2,604
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 119
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

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

  #2  
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
Reply With Quote  
Join Date: Oct 2005
Posts: 27
Reputation: edmicman is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
edmicman's Avatar
edmicman edmicman is offline Offline
Light Poster

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

  #3  
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...
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 25
Solved Threads: 368
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Lazy, Useless & Apathetic

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

  #4  
Sep 14th, 2007
You need to have a basic understanding of Javascript objects for understanding the solution presented below:

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

Happiness corrupts people.

Failing to value the lives of others cheapens your own.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb JavaScript / DHTML / AJAX Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 3:04 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC