对动态表单域进行计算

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

从设计的角度来看，你可以添加类的每个产品，一类是指一个特定的产品和其他类指的是你要添加到您的总计任何产品。

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

Answer 2

这里是运行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：只要你name标签使用相同的名称

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 3

，你可以这样做：

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