Undefined offset in checkbox dynamic field

Question

I have a dynamic field where user can add as many rows as it wants. There are 3 checkboxs in each row. after user added as much as they wanted they click a button and get sent to FgProcess.php.

FgTable.php

<script>
var FgRow = 0;
function addfg()
{
    FgRow++;
    var html = "<tr>";
        html += "<td><input type='text' name='SKUDescription[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='LotNumber[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='BBD[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='Size[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='SizeUOM[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='UnitsPerCase[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='CaseCount[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='CasePartial[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='UnitsDamaged[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='UnitsLeak[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='UnitsSample[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='UnitTotal[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='NetWeightTotal[]' class ='form-control'/></td>";
        html += "<td><input type='text' name='ProductTemperature[]' class ='form-control'/></td>";
        html += "<td><input type='checkbox' name='Organic[]' value='1' class='custom-checkbox'/></td>";
        html += "<td><input type='checkbox' name='OnHold[]' value='1' class='custom-checkbox'/></td>";
        html += "<td><input type='checkbox' name='WIP[]' value='1' class='custom-checkbox'/></td>";
        html += "<td style='width: 2%'></td>";
        html += "</tr>";
        
        document.getElementById("finishedgoods_row").insertRow().innerHTML = html;
}

My Problem is that I get an offset error when user does not check the checkboxes. I know the reason is that if not checked the value is NULL.

I tried fixing this issue by adding hidden input for each of my checkboxes but then I got extra checkbox values sometimes!

FgProcess.php

if (isset($_POST['fgAdd']))
{
    $WOID = $_POST['id'];
    print_r($_POST);

    for ($i = 0; $i < count($_POST["SKUDescription"]); $i++)
    {
        $SKUDescription = $_POST["SKUDescription"][$i];
        $LotNumber = $_POST["LotNumber"][$i];
        $BBD = $_POST["BBD"][$i];
        $Size = $_POST["Size"][$i];
        $SizeUOM = $_POST["SizeUOM"][$i];
        $UnitsPerCase = $_POST["UnitsPerCase"][$i];
        $CaseCount = $_POST["CaseCount"][$i];
        $CasePartial = $_POST["CasePartial"][$i];
        $UnitsDamaged = $_POST["UnitsDamaged"][$i];
        $UnitsLeak = $_POST["UnitsLeak"][$i];
        $UnitsSample = $_POST["UnitsSample"][$i];
        $UnitTotal = $_POST["UnitTotal"][$i];
        $NetWeightTotal = $_POST["NetWeightTotal"][$i];
        $ProductTemperature = $_POST["ProductTemperature"][$i];

        if ($_POST["Organic"][$i]==null){$Organic = '0';}else{$Organic = $_POST["Organic"][$i];}
        if ($_POST["OnHold"][$i]==null){$OnHold = '0';}else{$OnHold = $_POST["OnHold"][$i];}
        if ($_POST["WIP"][$i]==null){$WIP = '0';}else{$WIP = $_POST["WIP"][$i];}
        //after this part insert into mysql and check errors and etc
    }
        //the rest of if statement

I tried checking for NULL but it didn't work. Each of these lines gave me a Undefined offset: 1 error.

if ($_POST["Organic"][$i]==null){$Organic = '0';}else{$Organic = $_POST["Organic"][$i];}
if ($_POST["OnHold"][$i]==null){$OnHold = '0';}else{$OnHold = $_POST["OnHold"][$i];}
if ($_POST["WIP"][$i]==null){$WIP = '0';}else{$WIP = $_POST["WIP"][$i];}

for example when i tried to add two rows, with the first row checkboxes being checked and then second row not being checked, this is what i get when print_r($_POST)

[Organic] => Array ( [0] => 1 ) [OnHold] => Array ( [0] => 1 ) [WIP] => Array ( [0] => 1 )

I know the problem is from checkboxes since i had no problem when the 3 checkboxes were text.

I would appreciate any help.

score 2 · Accepted Answer · answered Jul 31 '20 at 22:37

The issue is that (for each category) all your checkbox inputs have the same name, so only one of them is being sent to the server. To pass an array of checkbox values to the server, you should include the row index inside the brackets in Organic[] and the others.

So, when adding rows, keep track of the row's index, and reflect the in the names of the checkbox inputs. Slightly modified your code to reflect what I mean:

var FgRow = 0;
function addfg()
{
    FgRow++;
    var html = "<tr>";
        html += "<td><input type='checkbox' name=`Organic[${FgRow}]` value='1' class='custom-checkbox'/></td>";
        html += "<td><input type='checkbox' name=`OnHold[${FgRow}]` value='1' class='custom-checkbox'/></td>";
        html += "<td><input type='checkbox' name=`WIP[${FgRow}]` value='1' class='custom-checkbox'/></td>";
        html += "<td style='width: 2%'></td>";
        html += "</tr>";
        
        document.getElementById("finishedgoods_row").insertRow().innerHTML = html;
}

Thanks it worked. although i had to change a few things. name='Organic["+FgRow+"]' instead of name=`Organic[${FgRow}]` and also i had to start FgRow from -1 instead of 0. thank you so much. — ven, Jul 31 '20 at 23:16
For the `-1` thing: try incrementing `FgRow` *at the end* of the function, not at the beginning. Then you can start from 0. — Anis R., Jul 31 '20 at 23:21

Undefined offset in checkbox dynamic field

1 Answers1