获得两个输入的乘法并将其放入另一个输入 javascript

Question

Preveiw1, here 'Total' fields are empty without auto multiplication

Preveiw2, Here I fill the multiplication by myself

此函数收集所有行的所有 'total' 输入并将结果存储在另一个输入中。

var arr = document.getElementsByName('total[]');
    var tot=0;
    for(var i=0;i<arr.length;i++){ 
 //HERE before start collect total input value we need first to store the multiplication of QTE & PU. 
        if(parseFloat(arr[i].value))
            tot += parseFloat(arr[i].value); // here we collect all total input values
    }

    document.getElementById('Amount_Commission').value = tot; // store result

如果我自己填写总输入，这个功能很好用，但我需要用Js来完成。

-这是我的表单的一行，按钮 (+) 调用 JS 函数生成具有相同属性的另一行以存储多行。

            <td><input type="text" name="QTE[]" id="QTE" class="form-control"></td>
            <td><input type="text" name="PU[]" id="PU" class="form-control"></td>
            <td><input type="text" class="form-control form-control-lg" name="total[]" id="totali" 
             readonly ></td>
            <td><button type="button" id="add_btn" class="btn btn-primary">+</button></td> //generate another row
</tr>

添加新行功能

$(document).ready(function(){
$('#add_btn').on('click', function(){

    var html='';
    html='<tr>';
    html+='<td><input type="text" name="designation[]" class="form-control"></td>';
    html+='<td><input type="text" name="QTE[]" id="QTE" class="form-control"></td>';
    html+='<td><input type="text" name="PU[]" id="PU" class="form-control"></td>';
    html+='<td><input type="text" class="form-control form-control-lg" name="total[]" id="totali" readonly ></td>';
    
    html+='<td><button type="button"   id="remove" class="btn btn-danger">-</button></td>';
    html+='</tr>';
    $('tbody').append(html);

})
});

$(document).on('click', '#remove',function(){
    $(this).closest('tr').remove();
});

Answer 1

您的表格有问题主要是 ids。 ids 在整个页面中应该是唯一的，而任何时候用户单击 + 按钮都会为输入创建重复的 id。（我对你的表单结构的理解。）

解决方法是在inputs id: QTE1, PU1, totali1的末尾加上一个数字然后在你的循环中

const QTEValue = document.getElementById('QTE'+i).value
const PUValue = document.getElementById('PU'+i).value
const resultOfCalculation = QTEValue * PUValue
document.getElementById('totali'+i).value = resultOfCalculation

这应该会更新循环中的总输入。如果它不起作用，请告诉我

注意：您可以使用 tagName 通过创建输入列表 QTEArr、PUArr 和 totaliArr 来完成此操作。然后循环遍历但是效率很低，多次循环遍历三个数组可能会导致巨大形式的内存泄漏。

更新：更改行生成函数以添加数字 id，如下所示。

$(document).ready(function(){
  let incrementalRow = 1
  $('#add_btn').on('click', function(){

      let html='';
      html='<tr>';
      html+='<td><input type="text" name="designation[]" class="form-control"></td>';
      html+='<td><input type="text" name="QTE[]" id="QTE'+incrementalRow+'" class="form-control"></td>';
      html+='<td><input type="text" name="PU[]" id="PU'+incrementalRow+'" class="form-control"></td>';
      html+='<td><input type="text" class="form-control form-control-lg" name="total[]" id="totali'+incrementalRow+'" readonly ></td>';

      html+='<td><button type="button" id="remove'+incrementalRow+'" class="btn btn-danger">-</button></td>';
      html+='</tr>';
      
      $('tbody').append(html);
      incrementalRow++;

  })
});
$(document).on('click','[id^=remove]',function(){
    $(this).parent().parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tbody>
  </tbody>
  <button type="button" id="add_btn" class="btn btn-primary">+</button>
</table>

获得两个输入的乘法并将其放入另一个输入 javascript

get multiplication of two inputs and put it in another input with javascript

html

javascript

forms

arrays

input