#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    How to use Javascript to set state of checkboxes defined as PHP array?


    I'm dynamically creating a group of checkboxes. The values are passed to a second page where they are processed by PHP. I want to use Javascript to check all boxes or uncheck all boxes. The form has the name checkboxes:
    <form name="form" action="process_checkboxes.php3">
    If I were to define the checkboxes using different names without putting them into a PHP array, then I know how to use Javascript to check or uncheck all the boxes. For example, I could create the checkboxes thusly:

    <input type="checkbox" name="checkbox1" value="some_value1">
    <input type="checkbox" name="checkbox2" value="some_value2">
    I could then check all the checkboxes with a function that would contain:

    document.form.checkbox1.checked = true;
    document.form.checkbox2.checked = true;
    I could also give the checkboxes the same name and Javascript automatically creates an array, identifying each checkbox with an index it generates. Here are checkboxes with the same name:

    <input type="checkbox" name="same_name" value="some_value1">
    <input type="checkbox" name="same_name" value="some_value2">
    This would generate a JS array named "same_name", the elements of which could be accessed using the indices [0] and [1].

    I could check both these boxes with a function containing

    document.checkboxes.same_name[0].checked = true;
    document.checkboxes.same_name[1].checked = true;
    So far, so good. Here's the problem. In order to have PHP on the form-processing page successfully process the checkboxes with the same name, they must be named using the PHP convention using "[]" in the name. Using this convention the boxes would be named as follows:

    <input type="checkbox" name="same_name[]" value="some_value1">
    <input type="checkbox" name="same_name[]" value="some_value2">
    Here's the problem. Apparently adding the [] screws up creation of the Javascript array because I can no longer set the checked state. I get a JS error "document.checkboxes.same_name.0 is not an object". Apparently the JS array value is not created. I would appreciate any pointers as to what I'm doing wrong or for another solution. Thanks very much.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Oct 2000
    Location
    Back in the real world.
    Posts
    5,966
    Rep Power
    191
    you can use the "for ... in ..." construct or access the checkboxes by their number (at least in IE) like this:

    document.checkboxes['same_name'][0]

    (untested, maybe document.checkboxes['same_name[]'][0] )
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    Solution Found


    After posting my question, I found various other solutions posted elsewhere. Apparently lots of people run into this problem of accessing the PHP checkbox array with JS. For others looking for a solution to this problem, don't look under the heading HTML/Javascript, look under the heading PHP. I found lots of solutions at www.phpbuilder.com/forum/ in their PHP forum.

    Lots of people presented quite complicated solutions. The simplest solution I found was a little script that works well for me. Here's the script:

    <script language="JavaScript">
    <!--

    function UncheckAll() {
    document.form_name.reset();
    }

    function CheckAll() {
    with (document.form_name) {

    for (var i=0; i < elements.length; i++) {
    if (elements[i].type == 'checkbox' && elements[i].name == 'checkbox_name[]')
    elements[i].checked = true;
    }
    }
    }

    //-->
    </script>
    Note: This script is for the situation in which all the checkboxes are given the same name using the [] so that PHP recognizes you are creating an array. For example:

    <input type="checkbox" name="checkbox_name[]" value="value1">
    <input type="checkbox" name="checkbox_name[]" value="value2">

IMN logo majestic logo threadwatch logo seochat tools logo