在键入另一个字段时更改一个字段的输入值，该字段不适用于多个字段

我有一个网站，我有一个表单，表单有3个字段，可以添加多次点击，我的代码如下:

$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $("#niy");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="client_type">Service Type</label><input type="text" class="form-control" id="client_type" required name="service[]"></div></div><div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="client_type">Price</label><input type="text" class="form-control" id="client_type" required name="price[]"></div></div><div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="client_type">Total</label><input type="text" class="form-control" id="total" required name="total[]"></div></div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});

$('input[name="price[]"]').change(function() {
$('input[name="total[]"]').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row container1">
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="client_type">Service Type</label>
<input type="text" class="form-control" id="client_type" required name="service[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="client_type">Price</label>
<input type="text" class="form-control" id="client_type" required name="price[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="client_type">Total</label>
<input type="text" class="form-control" id="client_type" required name="total[]">
</div>
</div>
</div>
<a id="niy" class="btn btn-warning" style="color:white">Add New Service Field &nbsp;
<span style="font-size:16px; font-weight:bold;">+ </span>
</a>

我希望总字段显示其各自的价格字段的值，但这里只有第一行这样做，谁能告诉我如何解决这个问题，提前感谢

代码中的主要问题是因为您只绑定了change事件，该事件在页面首次加载时更新字段的值。这将忽略所有动态添加的字段。要解决这个问题，请使用委托事件处理程序-就像您对.delete按钮所做的那样。

话虽如此，值得注意的是还有其他几个问题需要解决:

不要在DOM中重复相同的id属性值。它们必须是独一无二的。另外，在内容中完全不要使用id，因为内容可以动态重复。使用class属性代替。
不要使用style属性的内联样式。将一种类型的代码放在另一种类型的代码中是不好的做法。HTML中的CSS，或者JS中的HTML。在本例中使用外部样式表。

add_button

$(add_button)

$

尽可能不要使用全局变量。由于各种原因，它们都是不好的做法，其中最重要的是它们会导致代码更长，更难维护。在这种情况下，更好的方法是检索DOM中已经存在的元素数量，并将其与已知的限制进行比较。

说了这么多，这里是一个工作演示:

jQuery($ => {
var max_fields = 10;
var $container = $(".container");
var $add_button = $("#niy");
$add_button.on('click', e => {
e.preventDefault();
if ($('.row').length >= max_fields) {
alert('You Reached the limits');
return;
}
let $newContent = $('.row:first').clone().appendTo($container);
$newContent.find(':input').val('');
});
$container.on("click", ".delete", e => {
e.preventDefault();
$(e.target).closest('.row').remove();
})
$container.on('change', '.price', e => {
$(e.target).closest('.row').find('.total').val(e.target.value);
});
});

body {
background-color: #CCC;
}
#niy {
color: white;
}
#niy span {
font-size: 16px;
font-weight: bold;
}
label {
width: 100px;
display: inline-block;
}
.row:first-child .delete {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="mb-4">
<label for="client_type">Service Type</label>
<input type="text" class="form-control service" required name="service[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="mb-4">
<label for="client_type">Price</label>
<input type="text" class="form-control price" required name="price[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="mb-4">
<label for="client_type">Total</label>
<input type="text" class="form-control total" required name="total[]">
</div>
</div>
<a href="#" class="delete">Delete</a>
</div>
</div>
<a id="niy" class="btn btn-warning">
Add New Service Field &nbsp;
<span>+ </span>
</a>

尝试下面的代码段一次，你会发现运行时oninput更新总数。这改善了用户体验。

$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $("#niy");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields)
{
x++;
$(wrapper).append('<div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="service_type'+x+'">Service Type</label><input type="text" class="form-control service_type" data-id="'+x+'" id="service_type'+x+'" required name="service[]"></div></div><div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="price_type'+x+'">Price</label><input type="text" class="form-control price_type" data-id="'+x+'" id="price_type'+x+'" required name="price[]"></div></div><div class="col-lg-4 col-sm-6"><div class="mb-4"><label for="total_type'+x+'">Total</label><input type="text" class="form-control" data-id="'+x+'" id="total_type'+x+'" readonly name="total[]"></div></div>'); 
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
$(document).on('input', '.service_type, .price_type', function(){
var id = $(this).attr('data-id');
if(id > 0)
{
var service_type = parseFloat($('#service_type'+id).val()) || 0;
var price_type = parseFloat($('#price_type'+id).val()) || 0;
var total_type = service_type + price_type;
$('#total_type'+id).val(total_type.toFixed(2));
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row container1">
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="service_type1">Service Type</label>
<input type="text" class="form-control service_type" id="service_type1" data-id="1" required name="service[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="price_type1">Price</label>
<input type="text" class="form-control price_type" id="price_type1" data-id="1" required name="price[]">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="total_type1">Total</label>
<input type="text" class="form-control" id="total_type1" data-id="1" readonly name="total[]">
</div>
</div>
</div>
<a id="niy" class="btn btn-warning">Add New Service Field &nbsp;
<span style="font-size:16px; font-weight:bold;">+ </span>
</a>

相关内容

最新更新

热门标签：