#javascript #html #jquery #ajax #laravel
#javascript #HTML #jquery #ajax #laravel
Вопрос:
В первом скрипте (javascript) Я создаю динамическую HTML-форму, в которой пользователь может динамически добавлять новые поля ввода. Во втором скрипте (javascript) в том же файле я хочу автоматически вычислять поля, но это не работает, и я не знаю почему. Пожалуйста, помогите мне с этим. Я хочу, чтобы вы умножили количество полей на field netunit и получили значение в nettotal и умножили количество полей на grossunit, чтобы получить значение grosstotal.
<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. 1 проблема, которую я вижу, заключается в том, что при запуске
dynamic_field(count)
он снова добавит html, что приведет к дублированию идентификаторов. Пожалуйста, помните, что все идентификаторы должны быть уникальными. Также было бы здорово, если бы вы могли создать рабочий пример своего кода.
Ответ №1:
Ваша основная проблема заключается в том, что вы получите дублированные идентификаторы при запуске add
кода.
Я переписал код, чтобы использовать классы, а не идентификаторы.
ДЕМОНСТРАЦИЯ
$(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>