Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Only submit if at least one checkbox is checked (dynamically)

    Hi,
    Have searched the forum and found a soloution that probably only needs some modification.

    I have a number of question with related alternatives in a db that I display on a webpage. I wan't to force the user to select an alternative. I use checkboxes because sometimes more then one answer is correct. I have found a bit of code that lets me do this. The problem is that sometimes the alterative to the question is 3 and sometimes 5 (I don't know beforehand how many alterantives a question has). So is there a way to modify the code to work if there are 3 checkboxes or 5 checkboxes and so on...?

    The code below only works with a fixed number of alternatives.

    Code:
    <form action="../" onsubmit="return checkCheckBoxes(this);">
    	<p><input type="CHECKBOX" name="CHECKBOX_1" value="This..."> This...</p>
    	<p><input type="CHECKBOX" name="CHECKBOX_2" value="That..."> That...</p>
    	<p><input type="CHECKBOX" name="CHECKBOX_3" value="...and The Other"> ...and The Other</p>
    	<p><input type="SUBMIT" value="Submit!"></p>
    </form>
    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(theForm) {
    	if (
    	theForm.CHECKBOX_1.checked == false &&
    	theForm.CHECKBOX_2.checked == false &&
    	theForm.CHECKBOX_3.checked == false) 
    	{
    		alert ('You didn\'t choose any of the checkboxes!');
    		return false;
    	} else { 	
    		return true;
    	}
    }
    //-->
    </script>

  • #2
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    I have limited knowledge of Javascript, but I'm going to try and help anyway!

    What I would do would be something like:

    Code:
    <form action="../" onsubmit="return checkCheckBoxes("CHECKBOX_", 3);">
    	<p><input type="CHECKBOX" id="CHECKBOX_1" value="This..."> This...</p>
    	<p><input type="CHECKBOX" id="CHECKBOX_2" value="That..."> That...</p>
    	<p><input type="CHECKBOX" id="CHECKBOX_3" value="...and The Other"> ...and The Other</p>
    	<p><input type="SUBMIT" value="Submit!"></p>
    </form>
    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(idstem, count) {
      allunchecked = true;
      for (i=1, i<=count; i++) {
        if (document.getElementbyId(idstem + i).checked == true) {
          allunchecked = false;
          break;
        }
      } 	
      
      if (allunchecked) {
         alert ('You didn\'t choose any of the checkboxes!');
         return false;
      } else {
        return true;
      }
    }
    //-->
    </script>
    I haven't tried it, but I reckon it should work! You just have to change the "3" argument to checkCheckBoxes to however many you have in the HTML.

    Hope that helps!

    I'm sure there is some fantastic, slick and totally cool way of doing it which one of the Javascript gurus on here could show you ... (I am not one of them!).

    Mike.
    Last edited by mlse; 12-22-2005 at 04:02 PM.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response. Unfortunately the code doesn't work. It doesn't give any error messages but it don't force the user to select a checkbox, it don't make any control at all.

  • #4
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a script that you should be able to adapt to suit

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body>
    <script>
    function check(){
    count = 0;
    	for(x=0; x<document.form1.checkbox.length; x++){
    		if(document.form1.checkbox[x].checked==true){
    		count++
    		}
    	}
    	
    	if(count==0){
    		alert("You must choose atleast 1");
    	}
    	else if(count>3){
    		alert("You can only choose upto 3");
    	}
    	else {
    		alert("ok")
    	}
    }
    </script>
    <form name="form1" id="form1" method="post" action="">
      <p>
        <input type="checkbox" name="checkbox" value="red" />
      Red<br />
      <input type="checkbox" name="checkbox" value="green" />
      Green<br />
      <input type="checkbox" name="checkbox" value="blue" />
      Blue<br />
      <input type="checkbox" name="checkbox" value="black" />
      Black<br />
      <input type="checkbox" name="checkbox" value="white" />
      White<br />
      <input type="checkbox" name="checkbox" value="yellow" />
      Yellow<br />
      <input type="checkbox" name="checkbox" value="purple" /> 
      Purple
    </p>
      <p>
        <input type="button" name="Button" value="Click Me" onclick="check()" />
    </p>
    </form>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it works great!

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I realize this post is old but I need something like degsy's code but it needs to work with check boxes that have different names and id's.

    Anyone know how?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by jeffshead View Post
    I realize this post is old but I need something like degsy's code but it needs to work with check boxes that have different names and id's.

    Anyone know how?
    Why? What is wrong with having multiple checkboxes with the same name (not the same id of course)?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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