javascript - 如何添加新的输入行并插入数据库并出现未初始化的字符串偏移量 : 0 in 的错误

Question

我正在尝试在数据库中插入新的输入行。但错误显示(未初始化的字符串偏移量:0 in)

我可以插入单行，但由于出现错误，无法插入 2 行或更多行。

我搜索了很多但没有找到完美的解决方案。请查看我的代码并给我建议。谢谢

我的 HTML 代码如下:-

<div id="addhere">
    <tr>
    <td><input type="text" class="form-control item_id" value="" readonly="" name="item_id[]"></td>
    <td><textarea class="form-control item_name" name="item_name[]" rows="3"></textarea> </td> 
    <td><input type="text" class="form-control item_qty" value="" name="item_qty[]"></td> 
    <td><input type="text" class="form-control item_price" name="item_price[]" value="" style="width: 89px;"></td> 
    <td> <select class="form-control item_taxed" name="item_taxed[]">
    <option value="Yes">Yes</option> <option value="No" selected="">No</option></select></td>
    <td> <select class="form-control item_status" name="item_status[]" style="width: 89px;">
    <option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td>

    <td><input type="text" name="datepicker[]" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td>
    <td><input type="text" name="departing[]" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td>

    </tr>
</div> 

对于下面的新表单行 Javascript 函数:-

$('#blank-add').on('click', function(){
    $("#invoice_items").find('tbody')
        .append(
        '<tr> <td><input type="text" class="form-control item_id" value="" readonly="" name="item_id"></td> <td><textarea class="form-control item_name" name="item_name" rows="3"></textarea></td> <td><input type="text" class="form-control qty" value="" name="item_qty"></td> <td><input type="text" class="form-control item_price" name="item_price" value=""></td><td> <select class="form-control item_taxed" name="item_taxed"> <option value="Yes">Yes</option> <option value="No" selected>No</option></select></td><td> <select class="form-control item_status" name="item_status" style="width: 89px;"><option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td><td><input type="text" name="datepicker" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td><td><input type="text" name="departing" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td></tr>'
    );
    });

和我的 php 代码如下:-

<?php
// inserting invoice data into database name "billing"

if(isset($_POST['_dec_point'])){
    for ( $row = 0; $row < count( $_POST['item_id'] ); ++$row ) {
        $item_id = $_POST['item_id'][$row]; 
        $item_name = $_POST['item_name'][$row];
        $item_qty = $_POST['item_qty'][$row];
        $item_price = $_POST['item_price'][$row];
        $item_taxed = $_POST['item_taxed'][$row];
        $item_status = $_POST['item_status'][$row];
        $invoice_date = date('Y-m-d',  strtotime($_POST['datepicker']))[$row];
        $due_date = date('Y-m-d',  strtotime($_POST['departing']))[$row];
        $item_notes = $_POST['item_notes'][$row];
        $client_name = $_POST['client_name'][$row];
        $client_email = $_POST['client_email'][$row];
        $client_phone = $_POST['client_phone'][$row];
        $client_company = $_POST['client_company'][$row];
        $client_address = $_POST['client_address'][$row];
        $client_city = $_POST['client_city'][$row];
        $client_state = $_POST['client_state'][$row];
        $client_pin = $_POST['client_pin'][$row];
        $client_country = $_POST['client_country'][$row];

        $query = "insert into billing 
                       (item_id,item_name,item_qty,item_price,
                        item_taxed,item_status,invoice_date,due_date,
                        item_notes,client_name,client_email,
                        client_phone,client_company,
                        client_address,client_city, 
                        client_state, client_pin,
                        client_country)                         
                 values ('$item_id','$item_name','$item_qty',
                         '$item_price','$item_taxed','$item_status',
                         '$invoice_date','$due_date','$item_notes',
                         '$client_name','$client_email',
                         '$client_phone','$client_company',
                         '$client_address','$client_city',
                         '$client_state','$client_pin',
                         '$client_country')";
        }

        $run_insert = mysqli_query($con,$query);

        if($run_insert){
            $last_id = mysqli_insert_id($con);
            echo "<script>alert('Submission Successful!')</script>";
            echo "<script>window.open('invoices_view.php?view=$last_id','_self')</script>";
        }
    }
?>

Answer 1

如果您采用良好的缩进方案，像这样的简单问题将变得很明显。

您在执行查询之前终止了 for 循环，因此您只会更新最后一行

您还使用了 ++$row，它在使用之前递增 $row，我想这应该是 $row++ 在使用之后递增。

<?php
// inserting invoice data into database name "billing"

if(isset($_POST['_dec_point'])){
   /*
      Not sure why you are using ++$row rather than $row++
      That also may explain why you are loosing the first
      update out of 2.
   */

    for ( $row = 0; $row < count( $_POST['item_id'] ); ++$row ) {
        $item_id = $_POST['item_id'][$row]; 
        $item_name = $_POST['item_name'][$row];
        $item_qty = $_POST['item_qty'][$row];
        $item_price = $_POST['item_price'][$row];
        $item_taxed = $_POST['item_taxed'][$row];
        $item_status = $_POST['item_status'][$row];
        $invoice_date = date('Y-m-d',  strtotime($_POST['datepicker']))[$row];
        $due_date = date('Y-m-d',  strtotime($_POST['departing']))[$row];
        $item_notes = $_POST['item_notes'][$row];
        $client_name = $_POST['client_name'][$row];
        $client_email = $_POST['client_email'][$row];
        $client_phone = $_POST['client_phone'][$row];
        $client_company = $_POST['client_company'][$row];
        $client_address = $_POST['client_address'][$row];
        $client_city = $_POST['client_city'][$row];
        $client_state = $_POST['client_state'][$row];
        $client_pin = $_POST['client_pin'][$row];
        $client_country = $_POST['client_country'][$row];

        $query = "insert into billing 
                   (item_id,item_name,item_qty,item_price,
                    item_taxed,item_status,invoice_date,due_date,
                    item_notes,client_name,client_email,
                    client_phone,client_company,
                    client_address,client_city, 
                    client_state, client_pin,
                    client_country)                         
             values ('$item_id','$item_name','$item_qty',
                     '$item_price','$item_taxed','$item_status',
                     '$invoice_date','$due_date','$item_notes',
                     '$client_name','$client_email',
                     '$client_phone','$client_company',
                     '$client_address','$client_city',
                     '$client_state','$client_pin',
                     '$client_country')";

    // } // endfor <-- comment this and add the one below

        $run_insert = mysqli_query($con,$query);

    /*
       This code makes little sence here if you are 
       going to update more than one billing at a time
    */
        if($run_insert){
            $last_id = mysqli_insert_id($con);
            echo "<script>alert('Submission Successful!')</script>";
            echo "<script>window.open('invoices_view.php?view=$last_id','_self')</script>";
        } // endif

    } // endfor  <-- move the endfor to here

}
?>

我还必须假设您向我们展示的这段代码在您的实际页面上重复了不止一次。

<div id="addhere">
    <tr>
    <td><input type="text" class="form-control item_id" value="" readonly="" name="item_id[]"></td>
    <td><textarea class="form-control item_name" name="item_name[]" rows="3"></textarea> </td> 
    <td><input type="text" class="form-control item_qty" value="" name="item_qty[]"></td> 
    <td><input type="text" class="form-control item_price" name="item_price[]" value="" style="width: 89px;"></td> 
    <td> <select class="form-control item_taxed" name="item_taxed[]">
    <option value="Yes">Yes</option> <option value="No" selected="">No</option></select></td>
    <td> <select class="form-control item_status" name="item_status[]" style="width: 89px;">
    <option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td>

    <td><input type="text" name="datepicker[]" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td>
    <td><input type="text" name="departing[]" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td>

    </tr>
</div> 

还有在表格中创建新行的 javascript 方法。我能否建议您看一下克隆最后一行，然后清除所有输入字段。这样你就不必维护一个单独的 HTML 来定义那行的内容，当行发生变化而你忘记修改那段 JS 时，这最终会让你或其他人绊倒。 Example here

事实上，这正是发生的事情!

我只是仔细查看了那个确切的 javascript 代码，那里还有另一个问题。您错误地命名了输入字段

它们的名称后都没有数组指示符 []，因此当您使用 JS 向表中添加新行时，所有这些字段只会出现 1 次。所以现在考虑克隆方法!