對動態表單域進行計算

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();