在第一个脚本(javascript)中,我正在创建动态html表单,用户可以在其中动态添加新的输入字段。在同一个文件中的第二个脚本(javascript)中,我想自动计算字段,但是它不起作用,我也不知道为什么。请帮我。我希望tu将字段数量与字段netunit相乘并获得总值,并将字段数量与totalunit相乘以获得值totaltotal。
<script>
$(document).ready(function(){
var count = 1;
dynamic_field(count);
function dynamic_field(number)
{
html = '<tr>';
html += '<td><input type="text" name="name[]" id="num1" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="PKWIU[]" id="num2" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="quantity[]" id="num3" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="unit[]" id="num4" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="netunit[]" id="num5" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="nettotal[]" id="num6" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="VATrate[]" id="num7" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="grossunit[]" id="num8" class="input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="grosstotal[]" id="num9" class="input form-control form-control-lg" /></td>';
if(number > 1)
{
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
$('#dynamic_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:'{{ route("invoice-dynamic-field.insert") }}',
method:'get',
data:$(this).serialize(),
dataType:'json',
beforeSend:function(){
$('#save').attr('disabled','disabled');
},
success:function(data)
{
if(data.error)
{
var error_html = '';
for(var count = 0; count < data.error.length; count++)
{
error_html += '<p>'+data.error[count]+'</p>';
}
$('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
}
else
{
dynamic_field(1);
$('#result').html('<div class="alert alert-success">'+data.success+'</div>');
}
$('#save').attr('disabled', false);
}
})
});
});
</script>
<script>
$(".input").on('input', function(){
var x = document.getElementById('num3').value;
x = parseFloat(x);
var y = document.getElementById('num5').value;
y = parseFloat(y);
if(Number.isNaN(x))
x=0;
else if(Number.isNaN(y))
y=0;
document.getElementById('num6').value= x * y;
var z = document.getElementById('num8').value;
z = parseFloat(y);
document.getElementById('num9').value= x * z;
});
</script>
答案 0 :(得分:1)
您的主要问题是,运行add
代码时,您将获得重复的ID。
我已经重写了代码,以使用类而不是id。
演示
$(document).ready(function() {
var count = 1;
dynamic_field(count);
function dynamic_field(number) {
html = '<tr>';
html += '<td><input type="text" name="name[]" class="num1 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="PKWIU[]" class="num2 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="quantity[]" class="num3 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="unit[]" class="num4 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="netunit[]" class="num5 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="nettotal[]" class="num6 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="VATrate[]" class="num7 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="grossunit[]" class="num8 input form-control form-control-lg" /></td>';
html += '<td><input type="text" name="grosstotal[]" class="num9 input form-control form-control-lg" /></td>';
if (number > 1) {
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
$('tbody').append(html);
} else {
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('click', '#add', function() {
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function() {
count--;
$(this).closest("tr").remove();
});
$('#dynamic_form').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: '{{ route("invoice-dynamic-field.insert") }}',
method: 'get',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
$('#save').attr('disabled', 'disabled');
},
success: function(data) {
if (data.error) {
var error_html = '';
for (var count = 0; count < data.error.length; count++) {
error_html += '<p>' + data.error[count] + '</p>';
}
$('#result').html('<div class="alert alert-danger">' + error_html + '</div>');
} else {
dynamic_field(1);
$('#result').html('<div class="alert alert-success">' + data.success + '</div>');
}
$('#save').attr('disabled', false);
}
})
});
});
$(document).on('input', ".input", function() {
var tr = $(this).closest("tr");
var x = tr.find(".num3").val();
x = parseFloat(x);
var y = tr.find(".num5").val()
y = parseFloat(y);
if (Number.isNaN(x))
x = 0;
else if (Number.isNaN(y))
y = 0;
tr.find(".num6").val(x * y);
var z = tr.find(".num8").val();
z = parseFloat(z);
tr.find(".num9").val(x * z);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody></tbody>
</table>