<div id="invoice_detail" class="ui-widget">
<table id="InputsWrapper">
<tr>
<span class="small"><a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
<tr>
<td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount Percentage</label></td><td><label for='total'>Final Price:</label></td>
</tr>
<tr>
<td>
<input class='item' type='text' name='item[]'>
</td>
<td>
<input class='qty' type='number' name='qty[]'>
</td>
<td>
<input class='price' type='number' name='price[]'>
</td>
<td>
<input class='discount' type='number' name='discount[]'>
%</td>
<td>
<input class='total' type='number' name='total[]' readonly >
</td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<tr><td><input class="item" type="text" name="item[]"></td><td><input class="qty" type="number" name="qty[]"></td><td><input class="price" type="number" name="price[]"></td> <td><input class="discount" type="number" name="discount[]"> %</td><td><input class="total" type="number" name="total[]" readonly ></td></tr>');
x++; //text box increment
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
$("#InputsWrapper").on('change', '.discount',function(){
var tr = $(this).closest('tr');
var quantity=tr.find(".qty").val();
var percent=tr.find(".discount").val();
var price=tr.find(".price").val();
var tprice = price * quantity
var discountpercent=percent / 100;
var discountprice=(tprice * discountpercent );
tr.find(".total").val(tprice - discountprice);
});
</script>
0 Comments