javascript - 对动态表单域进行计算

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