SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    validate checkboxes..check no more than 2

    I need to validate checkoxes to make sure the user selects no more than 2 of the checkboxes. The problem I'm having is in the naming of the checkboxes. The PHP form processor portion of the page requires the checkboxes to be named "dogs[beagle]". This is causing problems with the javascript validation. This is what I have so far...since I've used just the first part of the checkbox name "dogs" the script is not working..I'm kind of new to javascript...Anyone have any suggestions on how to make this work. Any help would be greatly appreciated. Thanks!

    Code:
    <script>
    function countChoices(obj) {
    max = 2; // max. number allowed at a time
    
    dogs = obj.form.dogs.checked;  // your checkboxes here
    dogs = obj.form.dogs.checked;
    dogs = obj.form.dogs.checked;
    dogs = obj.form.dogs.checked;  // add more if necessary
    
    count = (dogs ? 1 : 0) + (dogs ? 1 : 0) + (dogs ? 1 : 0) + (dogs ? 1 : 0);
    // If you have more checkboxes on your form
    // add more  (box_ ? 1 : 0)  's separated by '+'
    
    if (count > max) {
    alert("Oops!  You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
    obj.checked = false;
       }
    }
    </script>



    HTML Code:
    <form name="Form1" method="POST" action="form_processor3.php">
    	<p><input type="checkbox" name="dogs[beagle]" onClick="countChoices(this)"> Beagle</p>
    	<p><input type="checkbox" name="dogs[bichon_frise]" onClick="countChoices(this)"> Bichon Frise</p>
    	<p><input type="checkbox" name="dogs[collie]" onClick="countChoices(this)"> Collie</p>
    	<p><input type="checkbox" name="dogs[yorkie]" onClick="countChoices(this)"> Yorkie</p>
    	<p><input type="submit" name="Submit" value="Submit"></p>
    </form>

  2. #2
    SitePoint Zealot sajjad's Avatar
    Join Date
    May 2005
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dear i have solve the problem and here is the solution
    keep the below content in head section
    <SCRIPT LANGUAGE="javascript">

    function KeepCount() {

    var NewCount = 0

    if (document.Form1.beagle.checked)
    {NewCount = NewCount + 1}

    if (document.Form1.bichon_frise.checked)
    {NewCount = NewCount + 1}

    if (document.Form1.collie.checked)
    {NewCount = NewCount + 1}

    if (document.Form1.yorkie.checked)
    {NewCount = NewCount + 1}


    if (NewCount == 3)
    {
    alert('Pick Just Two Please')
    document.Form1; return false;
    }
    }
    </SCRIPT>

    and keef this section anywhere in body
    <form name="Form1" method="POST" action="form_processor3.php">
    <p><input type="checkbox" name="beagle" onClick="return KeepCount()"> Beagle</p>
    <p><input type="checkbox" name="bichon_frise" onClick="return KeepCount()"> Bichon Frise</p>
    <p><input type="checkbox" name="collie" onClick="return KeepCount()"> Collie</p>
    <p><input type="checkbox" name="yorkie" onClick="return KeepCount()"> Yorkie</p>
    <p><input type="submit" name="Submit" value="Submit"></p>
    </form>

    hopefully, this is what u were looking for
    If you lose your patience you lose half of battle

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem is in the name of the checkboxes

    The problem is in the name of the checkboxes. The form processor requires that the checkboxes are named "dogs[beagle]". I can get the javascript part working is I change the checkbox names to just "beagle", but than the PHP processor doesn't work? Any ideas on how to get this to work!!

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function validateCheckboxes(form, maxSelected)
    {
        var inputs = form.getElementsByTagName("input");
        var count = 0;
    
        for (var i = 0; i < inputs.length; ++i) {
            if (inputs&#91;i&#93;.type.toLowerCase() == "checkbox") {
                if (inputs&#91;i&#93;.checked) {
                    if (++count >= maxSelected) {
                        return false;
                    }
                }
            }
        }
    
        return true;
    }
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function countCheckboxes(obj) 
    {
        var list, i, countCheckboxes;
    
        countCheckboxes = 0;
    
        list = obj.getElementsByTagName("input");
    
        for(i = 0; i < list.length; i++) 
        {
    
            if(list[i].type == "checkbox") 
            {
    
                if(list[i].checked == true) countCheckboxes += 1;
                if(countCheckboxes > 2) 
                {
    
                    alert("oops... just 2 clicks are allowed...");
                    return false;
    
                }
    
            }
    
        }
    
        return true;
    }
    cheers


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
  •