Question

嗨我想从表A中的项目列表中选择一个项目，它应该显示在表B中。之后，我想点击表格B中的提交按钮来保存表A中的选择项目。问题是我在表A中为每个输入字段输入一个年龄输入字段，但是当我尝试将其传递给表b时，它只传递for中每个第一项的输入值，如何使输入字段唯一。这是我的代码

<?php
$data=array();
$i=0;
$notarray = DataDB::getInstance()->get_rows_from_field('inventory','branch_id',$branchid);
foreach($notarray as $row){
    $data[$i]=$row;
    $i++;
}
?>


<table class="table table-bordered datatable" id="table_export">
    <thead>
        <tr>
            <th>#</th>
            <th><div>name</div></th>
            <th><div>surname</div></th>
            <th><div>date</div></th>
            <th><div>Age</div></th>
            <th><div>action</div></th>

        </tr>
    </thead>
    <tbody>

        <?php
        $i=0;
        for ($i=0;$i<count($data);$i++) {
            $item=$data[$i];
            $count = 1;
            ?>

            <tr>

                <td><?php echo $count++;?></td>
                <td><?php echo $item['name'];?></td>
                <td><?php echo $item['surn'];?></td>
                <td><?php echo $item['date']; ?></td>

                <form method="post" action="" role="form">
                    <td>

                        <div class="form-group">

                            <div class="">
                                <input type="number" class="form-control" name="age" data-validate="required" data-message-required="Age required" autofocus>
                            </div>
                        </div>

                    </td>

                    <td>

                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" id="addb" name="save" onclick='addToList(<?php echo json_encode($item);?>);'>Add</button>
                        </div>
                    </td>
                </form>

            </tr>

            <?php
        }

        ?>


    </tbody>
</table>

<br><br>

<div id="showToSave">
</div>


<script type="text/javascript">

    var listToSave=[]; // must be global

    var addToList= function(data){

        var button = document.getElementById("addb"),
        value =  button.form.quantity+"Panadol".value;
        data.quan = value;
        var lenData=listToSave.length;
        if(lenData>0){
                //this is used to avoid duplicate
            for(var j=1;j<lenData;j++){
                if(data.id==listToSave[j].id) return;
            }
        }

        listToSave.push(data);
        console.log(listToSave);
        document.getElementById('showToSave').innerHTML=createData(listToSave);


    };

    var createData= function (data) {

        var len=data.length;
        var tableToSave="<table class='table table-bordered datatable'><tr><td>Item</td> <td>Quantity</td> <td>Price</td> <td>Action</td></tr>";
        var i;
        for(i=0;i<len;i++){
            content=data[i];

            tableToSave += "<tr><td>"+content.item_name+"</td><td>"+content.quan+"</td><td>"+content.price+"</td><td>" +
            "<button class='btn btn-danger' onclick='deleteFromSave("+i+")'>Delete</button></td></tr>";
        }
        tableToSave += "</table><div><button class='btn btn-success' onclick='saveData()' type='button'>Save</button></div>";
        return tableToSave;
    };

    var deleteFromSave=function (index) {
        listToSave.splice(index,1); //this is use to delete from list to save
        document.getElementById('showToSave').innerHTML=createData(listToSave); //to rerender after delete
    };
</script>

Answer 1

您的bower install angular-cookies-mirror制作小型＆＃34; one-field＆＃34;表单，所以当你点击提交时，它只会发送一个项目。

你可以：

为每个小表单添加隐藏（s）输入以恢复所需的数据
制作一个包装整个表格的大表单，然后使用数据库唯一ID将<form>字段更改为name="age"。这样，您就可以访问ID为name="age[<?php echo $the_unique_id_of_this_line;?>]"的数据

如果这不能回答您的问题，请再解释一下您想要的内容

Answer 2

您应该将id="age<?php echo $i ?>"附加到您的年龄input字段。您可以在index中传递data和addToList，并从中检索年龄input字段值。

 var addToList= function(data,i){

    var button = document.getElementById("addb"),
    value =  button.form.quantity+"Panadol".value;
    data.quan = value;
    data.age = document.getElementById("age"+i).value;
    var lenData=listToSave.length;
    if(lenData>0){
            //this is used to avoid duplicate
        for(var j=1;j<lenData;j++){
            if(data.id==listToSave[j].id) return;
        }
    }

    listToSave.push(data);
    console.log(listToSave);
    document.getElementById('showToSave').innerHTML=createData(listToSave);


};

您的createData功能会发生如下变化。

   var createData= function (data) {

    var len=data.length;
    var tableToSave="<table class='table table-bordered datatable'><tr><td>Item</td> <td>Quantity</td> <td>Price</td><td>Age</td> <td>Action</td></tr>";
    var i;
    for(i=0;i<len;i++){
        content=data[i];

        tableToSave += "<tr><td>"+content.item_name+"</td><td>"+content.quan+"</td><td>"+content.price+"</td><td>"+content.age+"</td><td>" +
        "<button class='btn btn-danger' onclick='deleteFromSave("+i+")'>Delete</button></td></tr>";
    }
    tableToSave += "</table><div><button class='btn btn-success' onclick='saveData()' type='button'>Save</button></div>";
    return tableToSave;
};

我希望这会有所帮助。

为每个表单创建唯一的表单输入字段

2 个答案: