動態創建的表行中未發布輸入字段

Question

我的表格內部有表格，我向表格中動態添加帶有輸入字段的行，但是問題是，當我提交表格時，出現錯誤，提示未定義索引。 這是代碼：

HTML`

        <div class="row">
            <div class="col-md-12">
                <table id="myTable">
                    <th>
                        ID number
                    </th>
                    <th>
                        Lastname
                    </th>
                    <th>
                        Firstname
                    </th>
                    <th>
                        M.I.
                    </th>
                    <th>Course
                    </th>
                    <th>
                        Address
                    </th>
                    <th>
                        Contact number
                    </th>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="modal-footer">

        <input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/>
        <input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/>
    </div>
     </form>

`JAVASCRIPT創建行

    function insertRow()
    {
        var table = document.getElementById('myTable');
        var len = table.rows.length;
        var row = table.insertRow(len);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);

    var el1 = document.createElement("input");
    el1.type = "text";
    el1.name = "idnum[]";
    el1.size = "8";
    cell1.appendChild(el1);
    var el2 = document.createElement("input");
    el2.type = "text";
    el2.name = "lname[]";
    cell2.appendChild(el2);
    var el3 = document.createElement("input");
    el3.type = "text";
    el3.name = "fname[]";
    cell3.appendChild(el3);
    var el4 = document.createElement("input");
    el4.type = "text";
    el4.name = "mname[]";
    el4.size = "1";
    cell4.appendChild(el4);
    var el5 = document.createElement("input");
    el5.type = "text";
    el5.name = "course[]";
    el5.size = "5";
    cell5.appendChild(el5);
    var el6 = document.createElement("input");
    el6.type = "text";
    el6.name = "add[]";
    cell6.appendChild(el6);
    var el7 = document.createElement("input");
    el7.type = "text";
    el7.name = "contact[]";
    el7.size = "12";
    cell7.appendChild(el7);

}

PHP從創建的輸入字段中收集值

 <?php


    if(isset($_POST['btn_add_mul'])){
        $id = $_POST['idnum'];
        $lastname = $_POST['lname'];
        $firstname = $_POST['fname'];
        $midname = $_POST['mname'];
        $course = $_POST['course'];
        $address = $_POST['add'];
        $contact = $_POST['contact'];
        for($i = 0, $count = count($id); $i < $count; $i++ )
        {
            $id_num = $id[$i];
            $lname = $lastname[$i];
            $fname = $firstname[$i];
            $mname = $midname[$i];
            $cou = $course[$i];
            $add = $address[$i];
            $con = $contact[$i];

            mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error());
        }
    }
?>

我如何創建行有問題嗎？

Answer 1

 function insertRow() { var table = document.getElementById('myTable'); var len = table.rows.length; var row = table.insertRow(len); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); var cell6 = row.insertCell(5); var cell7 = row.insertCell(6); var el1 = document.createElement("input"); el1.type = "text"; el1.name = "idnum[]"; el1.size = "8"; cell1.appendChild(el1); var el2 = document.createElement("input"); el2.type = "text"; el2.name = "lname[]"; cell2.appendChild(el2); var el3 = document.createElement("input"); el3.type = "text"; el3.name = "fname[]"; cell3.appendChild(el3); var el4 = document.createElement("input"); el4.type = "text"; el4.name = "mname[]"; el4.size = "1"; cell4.appendChild(el4); var el5 = document.createElement("input"); el5.type = "text"; el5.name = "course[]"; el5.size = "5"; cell5.appendChild(el5); var el6 = document.createElement("input"); el6.type = "text"; el6.name = "add[]"; cell6.appendChild(el6); var el7 = document.createElement("input"); el7.type = "text"; el7.name = "contact[]"; el7.size = "12"; cell7.appendChild(el7); } insertRow() 

 <form method="post"> <div class="row"> <div class="col-md-12"> <table id="myTable"> <th> ID number </th> <th> Lastname </th> <th> Firstname </th> <th> MI </th> <th>Course </th> <th> Address </th> <th> Contact number </th> <tr> </tr> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/> <input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/> </div> </form> <?php if (isset($_POST['btn_add_mul'])) { $id = $_POST['idnum']; $lastname = $_POST['lname']; $firstname = $_POST['fname']; $midname = $_POST['mname']; $course = $_POST['course']; $address = $_POST['add']; $contact = $_POST['contact']; for ($i = 0, $count = count($id); $i < $count; $i++) { $id_num = $id[$i]; $lname = $lastname[$i]; $fname = $firstname[$i]; $mname = $midname[$i]; $cou = $course[$i]; $add = $address[$i]; $con = $contact[$i]; mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error()); } }?> 

首先打開表單標簽並將其方法設置為post，您將看到數據以以下格式發布，並且您需要在db中插入json_encode數據而不是直接數組，它將引發錯誤。

Array
(
[idnum] => Array
    (
        [0] => sada
    )

[lname] => Array
    (
        [0] => sad
    )

[fname] => Array
    (
        [0] => Zsdad
    )

[mname] => Array
    (
        [0] => sdsad
    )

[course] => Array
    (
        [0] => sd
    )

[add] => Array
    (
        [0] => asda
    )

[contact] => Array
    (
        [0] => ada
    )

[btn_add_mul] => Save
)