Javascript/Dropdown box detection

[CDitty]

I am trying to detect if the user has selected something from a multi drop down box and also if they have selected just one item. I cannot get the JS to detect it and to give me an alert. Can anyone look at the code below and tell me what I am doing wrong?

Chris

ps...the brackets on the select box acct[] are needed so php will know how to handle the variables on the next page.

<script LANGUAGE="JavaScript">
function multiMeterCheck(form){
		alert('1');
		if(form.acct.options[form.acct.selectedIndex].text == ""){
				alert('You must select atleast 2 meters.');
		return(false);
		}
		alert('2');
}
</script>

Multi Select box
<form method="get" action="index.php" name="multi" onsubmit="return multiMeterCheck(this)">
<input type="hidden" name="USID" value="87ab58294f2260a616ab8a57e21c9bed" />
<input type="hidden" name="fuseaction" value="gas.displayMeterMulti">
<input type="hidden" name="chart" value="multi_bar_">
&nbsp;<font class="news_text_header">Multiple Meters<br></font>
<select name="acct[]" multiple size="4" class="news_text">
<option value="9124cb7f878af48afff9859efcb3320c59b4f013">100010 Adm Grain</option>
<option value="71cc5d831bfb1be62ee4cbe702b9317af6cc1b84">100030 Apac - Harbor</option>
<option value="abf01a47b97459c99bbca20922bd815014a3a64b">100050 Aratex - Primary</option>
<option value="5b3394c2fa0dbd3eef2eeabaec57470269ebd226">100840 Coca Cola</option>
<option value="6cd854de8925ecaf04acb57b3d7adec756b738d4">101200 Dupont-(hydro...</option>
<option value="10bc5953380ea3668da16e67dc998400c4adb129">101190 Dupont-turbine</option>
<option value="a2e34c0900a36353ee488e74c153b329fe9f0385">100080 Von Drekle Pr...</option>
<option value="8be87ab5678c93511b4edc92266123db5a0fb46c">100062 White Station...</option>
</select>
<font class="news_text"></font><font class="spacer">&nbsp;</font>
<center><input type="submit" name="submit" value="Chart Multiple Meters" class="sidebarbuttons"></center>

[Mr. Brownstone]

This works for me:

<script LANGUAGE="JavaScript">
function multiMeterCheck(sAcctID){
	var oAcct = document.getElementById ( sAcctID );

	alert('1');
	if( oAcct.selectedIndex == -1 || oAcct.options [ oAcct.selectedIndex ].text == "" ) {
		alert ( 'You must select at least 2 meters.' );
		return ( false );
	}
	alert('2');
}
</script>

Multi Select box
<form method="get" action="index.php" name="multi" onsubmit="return multiMeterCheck('acct')">
<input type="hidden" name="USID" value="87ab58294f2260a616ab8a57e21c9bed" />
<input type="hidden" name="fuseaction" value="gas.displayMeterMulti">
<input type="hidden" name="chart" value="multi_bar_">
&nbsp;<font class="news_text_header">Multiple Meters<br></font>
<select id="acct" name="acct[]" multiple size="4" class="news_text">
<option value="9124cb7f878af48afff9859efcb3320c59b4f013">100010 Adm Grain</option>
<option value="71cc5d831bfb1be62ee4cbe702b9317af6cc1b84">100030 Apac - Harbor</option>
<option value="abf01a47b97459c99bbca20922bd815014a3a64b">100050 Aratex - Primary</option>
<option value="5b3394c2fa0dbd3eef2eeabaec57470269ebd226">100840 Coca Cola</option>
<option value="6cd854de8925ecaf04acb57b3d7adec756b738d4">101200 Dupont-(hydro...</option>
<option value="10bc5953380ea3668da16e67dc998400c4adb129">101190 Dupont-turbine</option>
<option value="a2e34c0900a36353ee488e74c153b329fe9f0385">100080 Von Drekle Pr...</option>
<option value="8be87ab5678c93511b4edc92266123db5a0fb46c">100062 White Station...</option>
</select>
<font class="news_text"></font><font class="spacer">&nbsp;</font>
<center><input type="submit" name="submit" value="Chart Multiple Meters" class="sidebarbuttons"></center>

I’ve emboldened and coloured the changes for you.

[CDitty]

Thanks. Works great. Any tip on how to make them choose a minimum of 2?

Chris

[Mr. Brownstone]

Check out the reply I made in this thread:

http://www.sitepointforums.com/showt...hreadid=127267

[CDitty]

Thanks. I'll check it out.

Funny, I never got the email saying I had a reply to this.

Thanks again.

Chris

[CDitty]

Mr. Brownstone, I am afraid that that link is over my head. Any pointers? Below is what I have now.

Chris

<script LANGUAGE="JavaScript">
function multiMeterCheck(sAcctID){
	var oAcct = document.getElementById(sAcctID);
	if(oAcct.selectedIndex == -1 || oAcct.options[oAcct.selectedIndex].text == ""){
		alert('You must select at least 2 meters.');
		return(false);
	}
	AtLeastTwoChecked(sAcctID);
}
function AtLeastTwoChecked(sListOfCheckIDs){ 
	if(!document.getElementById){
		return true;
	}
	
	sListOfCheckIDs = sListOfCheckIDs.split(','); 
	var bAtLeastOneIsChecked = false; 
	
	for(var i = 0; i < sListOfCheckIDs.length; i ++){
		if(document.getElementById(sListOfCheckIDs[i]).checked){
			bAtLeastTwoIsChecked = true;
			break;
		}
	}
	if(!bAtLeastTwoIsChecked){
		alert('Dude! You like, *totally* need to have at least one those check-boxes selected!');
	}
	return false; 
}
</script>

[Mr. Brownstone]

I modified the code so that it could verify any number of checkboxes:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

	<head>
		<title>Make sure at least one check-box is selected.</title>
	</head>

	<script language="JavaScript" type="text/javascript"><!-- 

		function AtLeastXChecked ( nMinChecked, sListOfCheckIDs ) {

			if ( ! document.getElementById ) return true;

			sListOfCheckIDs = sListOfCheckIDs.split ( ',' );

			var nNumChecked = 0;

			for ( var i = 0 ; i < sListOfCheckIDs.length ; i ++ ) {
				if ( document.getElementById ( sListOfCheckIDs [ i ] ).checked ) {
					nNumChecked ++;
				}
			}

			if ( nNumChecked < nMinChecked ) alert ( 'Dude! You like, *totally* need to have at least ' + nMinChecked + ' of those check-boxes selected!' );

			return nNumChecked >= nMinChecked;

		}

	// --></script>

	<body>

		<form method="post" onsubmit="return AtLeastXChecked ( 2, 'chk1,chk2,chk3,chk4,chk5' );">

			<ul style="list-style: none; margin: 0; padding: 0 0 15px 0;">
				<li><input id="chk1" type="checkbox" name="chk" value="1" /> <label for="chk1">Option #1</label></li>
				<li><input id="chk2" type="checkbox" name="chk" value="2" /> <label for="chk2">Option #2</label></li>
				<li><input id="chk3" type="checkbox" name="chk" value="3" /> <label for="chk3">Option #3</label></li>
				<li><input id="chk4" type="checkbox" name="chk" value="4" /> <label for="chk4">Option #4</label></li>
				<li><input id="chk5" type="checkbox" name="chk" value="5" /> <label for="chk5">Option #5</label></li>
			</ul>

			<input type="submit" />

		</form>

	</body>

</html>

Hope this helps!