Javascriptで請求書フォームを計算する

Question

数値を入力すると合計金額を計算する動的請求書フォームを作成しようとしています。私は入力フィールドとドロップダウン（選択）の組み合わせを持っています。私はこれら2つのタイプを組み合わせる方法を知らない。私は選択のために私は "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>