如何添加动态变化输入值
如何添加动态变化输入值
提问于 2019-03-15 00:34:51
我有问题。我使用jquery在php中进行动态输入，如下所示：
$(document).ready(function() {
var count = 0;
$("#add_btn").click(function(){
count += 1;
$('#container').append(
'<tr class="records">'
+ '<td ><div id="'+count+'">' + count + '</div></td>'
+ '<td><select class="form-control form-control-sm" name="site' + count + '" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'
+ '<td><input name="codeitem' + count + '" type="text"></td>'
+ '<td><a class="remove_item" href="#" >Delete</a>'
+ '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td>'
+ '</tr>'
);
});
$(".remove_item").live('click', function (ev) {
if (ev.type == 'click') {
$(this).parents(".records").fadeOut();
$(this).parents(".records").remove();
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id_form" action="save.php" method="post">
<table>
<tr>
<td>
<input type="button" name="add_btn" value="Add" id="add_btn">
</td>
</tr>
<tr>
<td>No</td>
<td>Item</td>
<td>Code Item</td>
<td> </td>
</tr>
<tbody id="container">
<!-- nanti rows nya muncul di sini -->
</tbody>
<tr>
<td>
<input type="submit" name=submit value="Save">
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
条件:如果我在combo select菜单中选择canon，那么在input codeitem显示项目的代码(在另一种情况下，我使用PHP从SQL表中获取codeitem。
在第一行输入字段中，这是成功。但是，如果我想添加更多的输入域，点击'add button‘来输入另一个项目(在第二行输入域)，为什么第一个输入码项改变了码项，而不是在第二行输入码项？
如何使用该条件输入动态项？
回答 1
Stack Overflow用户
发布于 2019-03-15 03:37:40
如果您不是在使用遗留代码库，那么最好使用最新版本的Jquery。
'<td ><div id="'+count+'">' + count + '</div></td>'，你不能多次使用相同的代码项，所以把它改成class.'<td><input name="codeitem' + count + '" type="text"></td>'，输入字段名称应该是固定的，以便在表单提交后在你的php脚本中处理它，但是由于你需要得到多个值使它成为一个数组codeitem[]- what是使用
rows[]输入字段吗？ - 要在更改组合选择菜单上动态输入代码项，你必须使用"Ajax“从你的数据库中获取所选组合菜单的‘
id’值。
检查此jsfiddle。
$(document).ready(function() {
$("#add_btn").click(function(){
let count = $('tr.records').length+1;
$('#container').append(
'<tr class="records">'
+ '<td ><div class="count">' + count + '</div></td>'
+ '<td><select class="site form-control form-control-sm" name="site[]" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'
+ '<td><input class="codeitem" name="codeitem[]" type="text"></td>'
+ '<td><a class="remove_item" href="#" >Delete</a>'
+ '<input class="rows" name="rows[]" value="'+ count +'" type="hidden"></td>'
+ '</tr>'
);
});
$(document).on('click',".remove_item", function (ev) {
$(this).parents(".records").fadeOut();
$(this).parents(".records").remove();
//Re-arrange the Row Serial No
$('tr.records div.count').each(function(index) {
$(this).text(index+1)
});
});
$(document).on('change',".site", function (ev) {
let site = $(this).val();
let current = $(this).parents(".records");
if(site!=''){
//make an ajax call to get the corresponding CodeItem of the selected site
/* $.ajax({
url: "/yoururl",
data:{"id":site},
success: function(result){
$(current).find('.codeitem').val(result);
}
}); */
}else{
$(current).find('.codeitem').val('');
}
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55167750
复制相关文章
相似问题