如何计算Javascript中多个动态输入字段的总和?

时间:2019-06-28 06:19:59

标签: javascript jquery arrays dynamic

我正在尝试通过javascript计算多个动态输入字段的总和。

这是我的主要输入内容

<input type="text" name="price[]" id="price" value="" class="form-control" />

这是我添加输入的方式:

$('.btn-add-srvice').on('click', function(e){

e.preventDefault();

var template = '<input type="text" name="price[]" id="price" class="form-control" />';

$(this).before(template);
});

此后,我有了一个自定义函数,该函数可以根据输入来计算数据:

function sum() {
    var price = document.getElementById('price').value;    
    var subtotal;    
}

它仅计算一个输入(不计算添加的输入)。现在,我想计算使用上述函数创建后显示的每个输入值的价格总和。

预期结果:

input1 = 30
input2 = 30
...... = ...
subtotal = ...

因此,小计变量应使用每个输入的和来填充。 谢谢。

已更新

现在,我该如何计算每一行的总和以及小计。在功能下方,您可以找到预期结果图像链接。

我的完整javascript功能:

$(document).on('keyup keydown change', ".price, .months, #mwst, #rabatt",function () {
            var months = document.getElementById('months').value;
            var mwst = document.getElementById('mwst').value;
            var rabatt = document.getElementById('rabatt').value;

             var priceSum = 0;
             var monthsSum = 0;
                $('.price').each(function(){
                    priceSum += parseFloat(this.value);
                });
                $('.months').each(function(){
                    monthsSum += parseFloat(this.value);
                });
                var subtotal = priceSum * monthsSum;
                var sum = priceSum * months;
                var mwstValue = subtotal + 7.7 / 100 * subtotal - subtotal;
                document.getElementById('subtotal').value = subtotal.toFixed(2);
                document.getElementById('sum').value = subtotal.toFixed(2);
                document.getElementById('mwst').value = mwstValue.toFixed(2);
                var percentage = (mwst / 100) * subtotal;
                var result = subtotal + mwstValue - parseFloat(rabatt);
                document.getElementById('total').value = result;
        });

我的完整动态插入输入:

$('.btn-add-srvice').on('click', function(e){

            e.preventDefault();

            var template = 
            '<div class="col-md-12" style="padding:0">'+
                '<div class="col-md-6" style="padding-left:0px">'+
                    '<div class="form-group">'+
                         '<select style="width: 100%" id="service_id" name="service_id[]" class="service_id ">'+
                         '@foreach($servicesList as $sli)'+                                 
                         '<option value="{{$sli->id}}">{{$sli->name}}</option>'+
                          '@endforeach'+
                          '</select>'+
                    '</div>'+
                '</div>'+
                '<div class="col-md-3" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="price[]" id="price" value="" class="form-control price" />'+                      
                    '</div>'+
                '</div>'+
                '<div class="col-md-1" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="months[]" id="months" value="" class="form-control months" />'+                       
                    '</div>'+
                '</div>'+
                '<div class="col-md-2" style="padding-right:0px">'+
                    '<div class="form-group">'+
                        '<input type="text" name="sum[]" id="sum" value="" class="form-control sum" />'+                        
                    '</div>'+
                '</div>'+
                '<div>'+
                /*'<button type="button" class="btn btn-default btn-xs remove">Remove</button>'+*/
                '</div>'+
            '</div>';
    enter code here
            $(this).before(template);

        });

以下是现在的外观和预期结果的链接: https://ibb.co/sVv3qGF

6 个答案:

答案 0 :(得分:2)

您要为多个元素赋予相同的ID。代替上课。然后得到他们的总和。

int p[1000000];
memset(p,25,sizeof(int)*1000000);
id<MTLBuffer> tmpBuffer = [self.device newBufferWithBytes:p 
       length:sizeof(int)*1000000 options:0 ];
//[tmpBuffer setPurgeableState:MTLPurgeableStateEmpty];

答案 1 :(得分:1)

首先,您用于添加输入的模板字符串是错误的,顾名思义,ID是唯一标识符,并且只能在页面上使用一次。您不需要ID,因此请将其从模板中删除

var template = '<input type="text" name="price[]" class="form-control" />':

现在只需更新输入求和函数:

function sum() {
    var priceElements = document.querySelectorAll('[name^=price]');
    var sum = 0;
    priceElements.forEach(function(element) {
       sum = sum + element.value;
    });
    console.log(sum);   
}

答案 2 :(得分:1)

尝试这样。在class元素中使用HTML并在jquery中尝试循环并获取值并将其求和。

$('.btn-add-srvice').on('click', function(e){

  e.preventDefault();

  var template = '<input type="text" name="price[]" id="price" class="form-control price" />';

  $(this).before(template);
});
$(document).on('keyup', ".price",function () {
  var total = 0;
  
  $('.price').each(function(){
    total += parseFloat($(this).val());
  })  

  console.log(total)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="price[]" id="price" value="" class="form-control price" />

<input type ="button" value="add" class="btn-add-srvice"/>

答案 3 :(得分:0)

  • 添加动态输入字段时,您应该提供唯一的ID 每个字段。
  • 然后维护唯一ID的列表。
  • 遍历该列表并计算总和。

答案 4 :(得分:0)

**##this part is working as expected**
from pyspark_llap.sql.session import HiveWarehouseSession
hive = HiveWarehouseSession.session(spark).build()
hive.showDatabases().show(10)


**#getting NullPointerException while reading actual data**
location_hd = hive.executeQuery("select * from raw.location_header")
location_hd.show()

答案 5 :(得分:0)

给每个输入一个普通的类。尝试一下,下面给出代码。

function doSum() {
  var x_names = document.getElementsByClassName("x_name")

  for(var i = 0; i < x_names.length; i++) {
    alert(x_names[i].value)
    // You can do sum of values here
  }
}
<input type="text" class="some_name" name="price[]" id="price" value="">
<input type="text" class="some_name" name="somethingElse" id="somethingElse" value="">