【发布时间】：2023-03-21 16:08:01
【问题描述】：
在第一个脚本 (javascript) 中，我正在创建动态 html 表单，用户可以在其中动态添加新的输入字段。在同一个文件中的第二个脚本（javascript）中，我想自动计算字段，但它不起作用，我不知道为什么。请帮帮我。我希望你将字段数量与字段 netunit 相乘，并在 nettotal 中获得值，并将字段数量与 Grossunit 相乘以获得总值。
<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>
【问题讨论】：
-
我看到的 1 个问题是，当您运行
dynamic_field(count)时，它会再次添加 html，这将导致 id 重复。请记住，所有 ID 都必须是唯一的。如果您可以创建代码的工作示例，那就太好了。
标签： javascript html jquery ajax laravel