SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 not returning false

    Hi,

    I've got the following code, which should allow the user only to select a maximum of 3 checkboxes. It works fine in Firefox, but in IE7 it shows the alert box when you click a 4th box, but that 4th box is able to be checked (i.e. the user actually can have 4 boxes checked even though they get the warning on the 4th click.)


    Code:
    <script type="text/javascript">
    	function KeepCount() {
    		var NewCount = 0
    		if (document.priorities.one.checked){NewCount = NewCount + 1}
    		if (document.priorities.two.checked){NewCount = NewCount + 1}
    		if (document.priorities.three.checked){NewCount = NewCount + 1}
    		if (document.priorities.four.checked){NewCount = NewCount + 1}
    		if (document.priorities.five.checked){NewCount = NewCount + 1}
    		if (document.priorities.six.checked){NewCount = NewCount + 1}
    		if (document.priorities.seven.checked){NewCount = NewCount + 1}
    		if (document.priorities.eight.checked){NewCount = NewCount + 1}
    		if (document.priorities.nine.checked){NewCount = NewCount + 1}
    		if (document.priorities.ten.checked){NewCount = NewCount + 1}
    		if (document.priorities.eleven.checked){NewCount = NewCount + 1}
    		if (document.priorities.twelve.checked){NewCount = NewCount + 1}
    
    		if (NewCount == 4)
    		{
    			alert('Please select only three')
    			return false;
    		}
    	}
    </script> 
    
    
    <form action="action.asp" method="post" name="priorities">
    <label for="one">one</label><input type="checkbox" name="one" id="one" class="checkbox" value="one" onclick="KeepCount(); return false;" /><br />
    <label for="two">two</label><input type="checkbox" name="two" id="two" class="checkbox" value="two" onclick="KeepCount(); return false;" /><br />
    <label for="three">three</label><input type="checkbox" name="three" id="three" class="checkbox" value="three" onclick="KeepCount(); return false;" /><br />
    <label for="four">four</label><input type="checkbox" name="four" id="four" class="checkbox" value="four" onclick="KeepCount(); return false;" /><br />
    <label for="five">five</label><input type="checkbox" name="five" id="five" class="checkbox" value="five" onclick="KeepCount(); return false;" /><br />
    <label for="six">six</label><input type="checkbox" name="six" id="six" class="checkbox" value="six" onclick="KeepCount(); return false;" /><br />
    </form>
    It's as if the return false isn't being recognised by IE7. Does anyone know how to fix this?

    Thanks...

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure, but it sounds like IE7 doesn't support unchecking (or not checking it) by returning false.

    If that's the case, you should add a workaround that unchecks the checked box if it is selected when there are already 3 others.

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Zurich, Switzerland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is how I would do it.

    Hi

    I'm not implying your solution is not good or anything like that, but I think this can be done in a simpler way. My solution would look like this and it works in IE6, IE7 and Firefox.

    Code HTML4Strict:
    <html>
    	<head></head>
    	<body>
    		<form action="action.asp" method="post" name="priorities">
    			<label for="one">one</label><input type="checkbox" name="one" id="one" class="checkbox" value="one" onclick="KeepCount(this);" /><br />
    			<label for="two">two</label><input type="checkbox" name="two" id="two" class="checkbox" value="two" onclick="KeepCount(this);" /><br />
    			<label for="three">three</label><input type="checkbox" name="three" id="three" class="checkbox" value="three" onclick="KeepCount(this);" /><br />
    			<label for="four">four</label><input type="checkbox" name="four" id="four" class="checkbox" value="four" onclick="KeepCount(this);" /><br />
    			<label for="five">five</label><input type="checkbox" name="five" id="five" class="checkbox" value="five" onclick="KeepCount(this);" /><br />
    			<label for="six">six</label><input type="checkbox" name="six" id="six" class="checkbox" value="six" onclick="KeepCount(this);" /><br />
    		</form>
     
    		<script type="text/javascript">
     
    			function KeepCount(chk) {
    				var checked = chk.checked;
    				var NewCount = 0
    				for(i=0;i<document.priorities.elements.length;i++){
    					if(document.priorities.elements[i].type=='checkbox' && document.priorities.elements[i].checked==true){
    						NewCount++;
    					}
    				}
     
    				if (NewCount > 3)
    				{
     
    					alert('Please select only three')
    					chk.checked=false;
    				}	
    			}
    		</script>
    	</body>
    </html>

    What I'm doing is, I'm looping through all input elements of the form and I pick out all the checkboxes and check whether they are checked or not (excuse all the "checks"). If you have other checkboxes in the same form which you don't want to be checked, you would have to set a specific class name or prefix/suffix to identify the checkboxes you'd like to verify.

    Hope I this helps.

    Cheers / Thomas


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
  •