Question

我正在尝试创建一个脚本，您可以在其中输入产品名称，数量，价格和税率％。然后计算每件产品的总成本和总体总成本。唯一的问题是每次添加新产品时我都会添加新的表单字段。

现在我的问题是：计算每件产品的总价格和总体总价的最佳方法是什么？

这是我到目前为止所做的事情，但由于我是javascript的新手，所以我很困难。它还将字段保存到mysql，一切正常，我只是坚持每个产品的总价格和总体价格。

提前致谢！

      <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onChange="output();"/> 
price:<input type="text" id="value2" name="add_price" onChange="output();"/> 
<select type="text" name="add_tax" onChange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 






 <input onClick="addRow(this.form); output()" type="button" value="Save product line..." /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
     <p id="result"> </p>

</div>

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">product: <input type="text" name="product[]" id = "product['+rowNum+']" value="'+frm.add_product.value+'"> amount: <input type="text" id="qty['+rowNum+']" name="qty[]" size="4" value="'+frm.add_qty.value+'"> price: <input type="text" id="price['+rowNum+']" name="price[]" value="'+frm.add_price.value+'">tax: <select type="text" id="tax['+rowNum+']" name="tax[]" value="'+frm.add_tax.value+'"><option value="21">21%</option><option value="6">6%</option><option value="0">0%</option><input type="button" value="Remove" onclick="removeRow('+rowNum+');output()"><div id="rowResult[rowNum]"></div>  <div id="rowResult[rowNum]"> </div></p>'  ;
    jQuery('#itemRows').append(row);

    frm.add_qty.value = '';

    frm.add_product.value = '';
    frm.add_price.value = '';
    frm.add_tax.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

</script>


<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var tableTotal = 0;
    var rowTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));
    }); 
    $("div[id^=rowResult]").each();
    for(i = 0; i< qtyArr.length; i++)
    {
        rowTotal = qtyArr[i] * priceArr[i] * ((taxArr[i] / 100)+1);
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "Total: " + tableTotal;


}

</script>

Answer 1

这是正在运行的JSFiddle 您需要做的是使用jquery选择器获取所有输入，然后遍历它们以获取它们的值。获得值后，可以轻松计算行总数和表总值

<div style="width:90%;margin:auto;">

    <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onchange="output();"/> 
price:<input type="text" id="value2" name="add_price" onchange="output();"/> 
<select type="text" name="add_tax" onchange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 



 <p id="result"> </p>

 <input onClick="addRow(this.form); output()" type="button" value="add new line" /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
</div>

和js：

function output(){
    var tableTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));

    }); 
    for(i = 0; i< qtyArr.length; i++)
    {
        console.log(qtyArr[i] +"*"+ priceArr[i] + "*" + taxArr[i])
        rowTotal = qtyArr[i] * priceArr[i] * (1-taxArr[i] / 100);
        document.getElementById('result' + (i+1)).innerHTML = rowTotal;
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "tableTotal: " + tableTotal;
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    output();
}

Answer 2

从设计角度来看，您可以为每个产品添加类，一个类引用特定产品，另一个类引用您要添加到总产品中的任何产品。

然后，您可以使用jQuerys $.each函数循环遍历每个类类型，获取内部文本（或存储成本值的任何位置）并将其添加并将其显示在输出字段中。

Answer 3

只要您对name标签使用相同的名称，就可以使用：

function calcTotal () {
  var sum = 0;
  $('input[name=add_price]').each(function(id, el){
sum += $(el).val();
  });
  return sum;
}
total();

在动态表单字段上进行计算

3 个答案: