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 12 of 12
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts

    Dynamic checkbox array problem

    Hello,

    I've a checkbox validation script to check for at least one ckeck.
    Code:
    <script type="text/javascript">
    
    function chkChecks(){
    isChecked=false
    alert(document.forms["form1"]["checked[]"].length);
    for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
    if(document.forms["form1"]["checked[]"][i].checked){
    isChecked=true
    }
    }
    
    if(isChecked){
    document.forms["form1"].submit()
    }
    else{
    alert('Please select a checkbox')
    }
    
    }
    
    </script>
    for the form
    Code:
    <form name="form1" action="test.php">
    <input type="checkbox" name="checked[]" value="1">
    <input type="checkbox" name="checked[]" value="2">
    <input type="checkbox" name="checked[]" value="3">
    <input class="button_140" type="button" value="Check" onclick="chkChecks()">
    </form>
    It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'.

    Can I modify this to work in all cases?

    thanks,
    art.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Remeber to always use the var keyword when defining variables. That was not the problem, but someday it will.

    Your name property should have been a valid JavaScript identifier. I removed the []'s from their names. (This also was not the problem.)

    Here's some code that works.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    
    <body><div>
    
    <form name="form1" action="test.php">
    <input type="checkbox" name="checked" value="1">
    <input type="checkbox" name="checked" value="2">
    <input type="checkbox" name="checked" value="3">
    <input class="button_140" type="button" value="Check" onclick="chkChecks()">
    </form>
    
    
    <script type="text/javascript">
    
    function chkChecks() {
      var isChecked = false;
      var f = document.forms.form1;
      var c = f.checked;
      c = c.length ? c : [c];
      alert(c.length);
      for(var i = 0; i < c.length; ++i)
        if(c[i].checked)
          isChecked = true;
      if(isChecked)
        f.submit();
      else
        alert('Please select a checkbox');
    }
    
    </script>
    
    
    </div>
    </body>
    </html>
    Trinithis

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hmm.. that works, but I have an associated server-side script to process these checkbox values. When I pass $checked through foreach() in php it says
    Code:
    Warning: Invalid argument supplied for foreach()
    , since $checked is not an array.
    I found a solution as put a hidden control with same name to ensure the array property for field name (checked), but then I've to check if($checked[$i]). Any other workarounds?
    BTW please let me know the meaning of expression c = c.length ? c : [c]; .
    thanks,
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    checked is a reserved javascript word. You should avoid using javascript reserved words for name, id, variables, functions and arguments.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    
    <body><div>
    
    <form name="form1" action="test.php">
    <input type="checkbox" name="checked[]" value="1">
    <input type="checkbox" name="checked[]" value="2">
    <input type="checkbox" name="checked[]" value="3">
    <input class="button_140" type="button" value="Check" onclick="chkChecks('checked[]')">
    </form>
    
    
    <script type="text/javascript">
    
    function chkChecks(nme) {
      var isChecked = false;
      var f = document.forms.form1;
      var c = document.getElementsByName(nme);
      c = c.length ? c : [c];
      alert(c.length);
      for(var i = 0; i < c.length; ++i)
        if(c[i].checked)
          isChecked = true;
      if(isChecked)
        f.submit();
      else
        alert('Please select a checkbox');
    }
    
    </script>
    
    
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    And the explanation for the vwphillips's solution:

    The classical reference (document.formname.elementname) returns the length of a checkboxes' group with the same name as being 0, probably because there is no serious reason for using the same name for more than one element, except for the radio groups.

    The DOM getElementsByName() bypasses this problem...
    Last edited by Kor; 12-17-2007 at 04:08 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Thank you so much vwphillips & Kor. That works a treat!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Owl
    Owl is offline
    New Coder
    Join Date
    Jun 2002
    Posts
    62
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Kor View Post
    checked is a reserved javascript word...
    ?????????????

    Owl

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Trinithis

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    checked is a javascript native attribute. It is a wise habit to avoid them when naming anything else custom... Do you want troubles? Do it... You may try it also with, say, the method submit ... IE woun't like it. I might give you tones of examples, but believe me, stay away of using methods/attributes words same as your variables/functions/arguments... You don't believe me? You are free to test... Always there is room for reinventing the wheel.
    Last edited by Kor; 12-17-2007 at 10:19 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    I agree that the identifier checked may be used. (And since it is, stay away from it unless defined on a custom object or know what you are doing.) My case is simply that it's not reserved. For example, although extremely bad code, it is still legal to do
    Code:
    var parseInt = function() {return 0;};
    However, this is not legal:
    Code:
    myObject.super = RegExp;
    Trinithis

  • #12
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This works too

    <form ... onSubmit="return formCheck()">
    <input type="checkbox" value="<?=$variable?>" name="chkbskid[]">
    </form>
    <script>
    function formCheck(){
    var isChecked=false;
    var chkbsk=document.getElementsByName("chkbskid[]");

    for (var i=0; i<chkbsk.length; i++)
    {
    if (chkbsk[i].checked){
    isChecked=true;
    }
    }
    if (!isChecked){
    alert ("Please select at least one value");
    return false;
    }

    }
    </script>


  •  

    Posting Permissions

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