使用Javascript計算髮票表單

Question

我試圖創建一旦輸入數字就可以計算總和的動態發票表單。我有輸入字段的組合和下拉（選擇）。我不知道如何結合這兩種類型。我知道選擇我應該使用「onchange」，但不知道如何與其他組合。

下一步，要有動態表單，可以添加（和刪除）行。我不知道如何添加它。我意識到我需要每個項目的獨特名稱。

$('input').keyup(function(){ 
 
    var qty1 = Number($('#qty1').val()); 
 
    var price1 = Number($('#price1').val()); 
 
\t \t var percentage1 = Number($('#percentage1').val()); 
 

 
    $('#sum1').html(qty1 * price1); 
 
    $('#total1').html(qty1 * price1 * percentage1);  
 
/* 
 
    var qty2 = Number($('#qty2').val()); 
 
    var price2 = Number($('#price2').val()); 
 
\t \t var percentage2 = Number($('#percentage2').val()); 
 

 
    $('#sum2').html(qty2 * price2); 
 
    $('#total2').html(qty2 * price2 * percentage2); 
 

 
\t $('#grand_total').html(total1 + total2);  
 
*/ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table> 
 
    <tr><td>name</td><td>quantity</td><td>price</td><td>sum</td><td>%</td><td>total</td></tr> 
 
    <tr> 
 
    <td><input type="text" name="item1" size=15 required /></td> 
 
    <td><input type="text" id="qty1" size=5 required /></td> 
 
    <td><input type="text" id="price1" size=5 required /></td> 
 
    <td><span id="sum1"></span></td> 
 
    <td><select name="percentage1"><option value="0.1">10%</option><option value="0.2">20%</option></select></td> 
 
    <td><span id="total1"></span></td> 
 
    </tr> 
 
    </table> 
 
    </form> 
 
    
 
    <p> 
 
    grand total: <span id="grand_total"></span> 
 
    </p>

任何想法，請？

Answer 1

這樣它會工作：

$('input').keyup(function(){ 
 
    calculate(); 
 
}); 
 

 
$('select').change(function(){ 
 
    calculate(); 
 
}); 
 

 
function calculate(){ 
 
    var qty1 = Number($('#qty1').val()); 
 
    var price1 = Number($('#price1').val()); 
 
    var percentage1 = Number($('#percentage1').val()); 
 
    $('#sum1').html(qty1 * price1); 
 
    $('#total1').html(qty1 * price1 * percentage1);  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table> 
 
    <tr><td>name</td><td>quantity</td><td>price</td><td>sum</td><td>%</td><td>total</td></tr> 
 
    <tr> 
 
    <td><input type="text" name="item1" size=15 required /></td> 
 
    <td><input type="text" id="qty1" size=5 required /></td> 
 
    <td><input type="text" id="price1" size=5 required /></td> 
 
    <td><span id="sum1"></span></td> 
 
    <td><select id="percentage1"><option value="0.1">10%</option><option value="0.2">20%</option></select></td> 
 
    <td><span id="total1"></span></td> 
 
    </tr> 
 
    </table> 
 
    </form> 
 
    
 
    <p> 
 
    grand total: <span id="grand_total"></span> 
 
    </p>