SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot CDitty's Avatar
    Join Date
    Feb 2000
    Location
    Memphis Tn
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript/Dropdown box detection

    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.

    Code:
    <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>

  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works for me:
    Code:
    <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.
    Of course, that's just my opinion. I could be wrong.

  3. #3
    SitePoint Zealot CDitty's Avatar
    Join Date
    Feb 2000
    Location
    Memphis Tn
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Works great. Any tip on how to make them choose a minimum of 2?

    Chris

  4. #4
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out the reply I made in this thread:

    http://www.sitepointforums.com/showt...hreadid=127267
    Of course, that's just my opinion. I could be wrong.

  5. #5
    SitePoint Zealot CDitty's Avatar
    Join Date
    Feb 2000
    Location
    Memphis Tn
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll check it out.

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

    Thanks again.

    Chris

  6. #6
    SitePoint Zealot CDitty's Avatar
    Join Date
    Feb 2000
    Location
    Memphis Tn
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still confused

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

    Chris

    Code:
    <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>

  7. #7
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I modified the code so that it could verify any number of checkboxes:
    HTML Code:
    <!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!
    Of course, that's just my opinion. I could be wrong.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •