Calculate invoice form with Javascript -
i trying create dynamic invoice form calculates sums once numbers entered. have combination of input fields , drop down (select). not know how combine these 2 types. know select should use "onchange" not sure how combine rest.
and next step, have dynamic form, able add (and remove) rows. have no idea how add it. realize need unique names each item.
$('input').keyup(function(){ var qty1 = number($('#qty1').val()); var price1 = number($('#price1').val()); var percentage1 = number($('#percentage1').val()); $('#sum1').html(qty1 * price1); $('#total1').html(qty1 * price1 * percentage1); /* var qty2 = number($('#qty2').val()); var price2 = number($('#price2').val()); var percentage2 = number($('#percentage2').val()); $('#sum2').html(qty2 * price2); $('#total2').html(qty2 * price2 * percentage2); $('#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>
any ideas, please?
this way work:
$('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>
Comments
Post a Comment