[英]Make form input field unique in for each
嗨,我想从表A中的项目列表中选择一个项目,它应该显示在表B中。之后,我要单击表B中的提交按钮以保存从表A中选择的项目。问题是我将年龄输入字段在表A中的每个字段中,但是当我尝试将其传递到表b中时,它仅传递每个字段中第一项的输入值,我如何使输入字段唯一。 这是我的代码
<?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>
您的<form>
会生成一个小的“单一字段”表单,因此,当您单击Submit时,它将仅发送一个项目。
您可以:
name="age"
字段更改为name="age[<?php echo $the_unique_id_of_this_line;?>]"
。 这将允许您访问ID为45的数据,例如$name[45]
如果这样不能回答您的问题,请多解释一些您想要的内容
您应该将id="age<?php echo $i ?>"
附加到您的年龄input
字段。 您可以在addToList
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;
};
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.