javascript - 如何填充多个值
问题描述
我在某处得到了这段代码,并根据我的需要对其进行了修改,但它只适用于第一部分。它应该在我向订单中添加多个项目时工作,但它没有按预期工作。
代码:
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 50; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="row"> <hr style="border-top: 3px solid #d71e1e;"><div style="height:183px; overflow:hidden;" class=" col-lg-6" ><label>Item Name</label><input type="text" id="myInput" name="item_name[]" onkeyup="myFunction()" class="form-control" placeholder="Enter Item Name" ><ul id="myUL" class="list-group" style="overflow:auto;height:125px;" ><?php $data = $this->inn->show_menu();foreach($data as $key=>$val){ if(!empty($val)){ ?><li class="list-group-item" ><?php echo $val->item_name; ?></li><?php } }?></ul></div><div class=" col-lg-6" ><label>Quantity</label><select class="form-control" name="quantity[]" required><option value="half">Half</option><option value="full">Full</option></select> </div> <br> <a href="#" class="remove_field btn btn-danger btn-md ">Remove This Item</a> </div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<h2 class="text-center">Creat Order</h2>
<hr>
<form class="form-group" action="<?php echo base_url('home/place_order'); ?>" method="post">
<div class="form-group col-lg-12">
<label >Food For</label>
<br>
<select class="form-control" name="for" required>
<option value="outside">Outside</option>
<option value="zomato">Zomato</option>
<option value="swiggy">Swiggy</option>
<?php
$rooms = $this->inn->show_room_no();
if (!empty($rooms))
{
foreach ($rooms as $rooms)
{
?>
<option value="<?php echo $rooms->room_no; ?>"><?php echo $rooms->room_no; ?></option>
<?php
}
}
else {
?>
<option >Choose Room Number if not available add in settings.</option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<div class="form-group col-lg-6">
<label>Item Name</label>
<input type="text" id="myInput" name="item_name[]" onkeyup="myFunction()" class="form-control" placeholder="Enter Item Name" >
<ul id="myUL" class="list-group" style="overflow:auto;height:125px;">
<?php
$data = $this->inn->show_menu();
foreach($data as $key=>$val)
{
if(!empty($val))
{
?>
<li class="list-group-item" id="listval" ><?php echo $val->item_name; ?></li>
<!--<li class="list-group-item" id="listval" ><a href="#"><?php // echo $val->item_name; ?></a></li>-->
<?php
}
}
?>
</ul>
</div>
<div class="form-group col-lg-6">
<label>Quantity</label>
<select class="form-control" name="quantity[]" required>
<option value="half">Half</option>
<option value="full">Full</option>
</select>
</div>
</div>
<div class="form-group input_fields_wrap col-lg-12">
<button class="add_field_button btn btn-primary">Add More Items</button>
<br><br>
</div>
<button type="submit" class="submit btn btn-success btn-block btn-lg">Place the Order</button>
</form>
</div>
</div>
</div>
<script>
var items = document.querySelectorAll("#myUL li");
for ( var i = 0; i < items.length; i++ )
{
items[i].onclick = function () {
document.getElementById("myInput").value = this.innerHTML;
};
}
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
解决方案
每次添加这样的元素表单时添加键:
从 :
name="item_name[]"
至:
name="item_name[' + x + ']" //x is your key
推荐阅读
- google-identity - Google Credential API one tab 登录只支持谷歌应用引擎?
- javascript - 在节点 js 中从 html 模板创建 PDF
- vue.js - 从源地址访问 XMLHttpRequest 已被 CORS 策略阻止
- java - 我如何在java中存储文件中第3行的值并提取特定的列详细信息
- android - E/libc:访问被拒绝查找属性“persist.vendor.sys.activitylog”
- javascript - React.js Bootstrap Accordion 单击时更改背景颜色
- r - 我需要有效地循环三个循环
- java - 在基于客户端-服务器的程序中使用递归函数时发生 NullPointerException - Java
- java - 如何转换可选
到 OptionalInt - python - 模块 'coco' 没有属性 'cocoConfig'