Question

在第一个脚本（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>

Answer 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>

在由javascript动态创建的HTML字段中，计算不起作用

1 个答案: