Блог

В первом скрипте (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>
  

Ваша основная проблема заключается в том, что вы получите дублированные идентификаторы при запуске 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>