Checking if checkboxes in PHP are checked using javascript

Question

echo '<div  class="col-lg-10 col-lg-offset-1 panel">' . "<table id='data' class='table'>
       <tr>
       <th></th>
       <th>Document No</th>
       <th>AWB NO</th>
       <th>Order Id</th>
       <th>Forms</th>
       <th>Extras</th>
       </tr>";
foreach ($cancel as $key => $value)
{
    echo "<tr>";
    echo "<td>" . "<input type='checkbox' name='name1' id='checkit$checkitCounter' />" . "</td>";
    echo "<td>" . $value[$d] . "</td>";
    echo "<td>" . $value[$a] . "</td>";
    echo "<td>" . $value[$o] . "</td>";
    echo "<td>" . $value[$f] . "</td>";
    echo "<td>" . $value[$e] . "</td>";
    echo "</tr>";
}
echo "</table></div>";

This above table is generated using php echo with checkbox generated every iteration.

<div style="padding-left:600px;">
    <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()'
       role='button'>Continue..</a>
</div>

The above button is supposed to run a javascript function given below:

function checkit {
    var x = document.getElementById("checkit").checked;
    if (x == false) {
        alert('All items are not removed,pls remove and continue');
    }
    else {
        window.location = "tst.php";
    }
}

The above JavaScript doesn't seem to be functioning properly as even though i have checked none of the boxes it just stays on the same page.

You can't have multiple ids on page, id must be unique, use class instead. — sinisake
– sinisake, Commented Sep 13, 2015 at 12:38
You should check out this answer stackoverflow.com/questions/3808808/… as it describes how to get and loop through elements using a class instead of an ID — Machavity
– Machavity ♦, Commented Sep 13, 2015 at 12:41
@Machavity i don't think that is a valid solution for this situation. — Pramod S
– Pramod S, Commented Sep 13, 2015 at 13:10
@Pramod S, yes, please just post your rendered HTML, not php, or setup fiddle. — sinisake
– sinisake, Commented Sep 13, 2015 at 13:24

sinisake · Accepted Answer · 2015-09-13 14:05:23Z

Example:

<div style="padding-left:600px;"> <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()' role='button'>Continue..</a>

</div>
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />

And js:

function checkit() {
    var boxes = document.querySelectorAll(".checkit");
    arr = [];
    for (i = 0; i < boxes.length; i++) {
        arr.push(boxes[i]);
    }

    console.log(arr);

    function is_checked(val) {
        return val.checked == true;
    }

    checked = arr.filter(is_checked);

    console.log(checked);

    if (checked.length != boxes.length) {
        alert('All items are not removed,pls remove and continue');
    } else {
        window.location = "tst.php";
    }


}

Demo: https://jsbin.com/cukuzeweza/edit?html,js,output

Maytham Fahmi · Accepted Answer · 2015-09-13 14:04:01Z

I have made a light version of your code and the rest is left to your development logic.

You have had a lot small problems in your code, like function in JavaScript needed (), the usage of single and double quotes, missing call the JavaScript function etc.

I have created a dummy array for test, but again you could do what you like to achieve your code.

Here is the working solution:

<?php
$cancel = ["checkBox1", "checkBox2", "checkBox3"];

echo "<div><table id='data' class='table'>
        <tr>
            <th></th>
            <th>Document No</th>
        </tr>";

foreach ($cancel as $value)
{
    echo "<tr>";
    echo "<td><input type='checkbox' name='name1' id='$value' onchange='checkIt(\"$value\");' /></td>";
    echo "<td>" . $value . "</td>";
    echo "</tr>";
}
echo "</table></div>";
?>
<script>
    function checkIt(checkBoxId) {
        var x = document.getElementById(checkBoxId).checked;
        console.log("x" + checkBoxId + " is " + x);
    }
</script>

You can see in your console the results of your checkbox.

Collectives™ on Stack Overflow

Checking if checkboxes in PHP are checked using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related