Invoice System Calculation Using Jquery in Laravel

What is Invoice?
Invoice is a list of products that sent or services provided, with a statement of the sum due for these. In other word, It is also called a bill.

An invoice is related to a sale with indicating the products with quantities, prices of products. In one word, an invoice is a business document.

Why need Invoice?
Generally, Payment terms are included on the invoice. Which may indicate the buyer has a maximum number of days in which to pay and is sometimes offered a discount if paid before the due date.

The buyer already paid for the products or services listed on the invoice. For avoiding confusion from buyer to seller, some sellers clearly state in large and/or capital letters on an invoice whether it has already been paid.

In one word,

1. An invoice for a seller, an invoice is a sales invoice.
2. An invoice for a buyer, an invoice is a purchase invoice.

But the term invoice indicates money is owed/owing.

How am i going to create Invoice Application?
Here, i'm going to discuss how to create Invoice or Billing Management Application by using Laravel with Jquery.

For making Simple invoice application i have used not only Laravel and JQuery but also we have use Bootstrap and database MYSQL also.

In this application, i will not create Invoice or Billing for one item but here i will make system that will create multiple dynamic item Invoice. This is simple example with source code and this example any one can use for his project or learning purpose like how to developed Invoice System by using Open Source Laravel and Jquery with Mysql and Bootstrap.

From this article, you can gain knowledge to make Simple Billing System in Laravel.

Used Technologies:

• Mysql
• Laravel
• JQuery
• Bootstrap

Our Created Invoice management system demo will be like the following Demo. In this system, we can add multiple Medicine with Quantity, Unit Price and Total Price.

If you want to add more medicine with different quantity and Unit price and total price then finally you will get the Sub Total Result in "Sub Total" field. Then you can add the vat percentage. Including product Sub total and vat percentage result will be show in the another specific field named "vat+sub total" after that you can paid the amount if any due remaining then the due will be shown in "Due" field and finally you will see the "Grand Total" result in the related field.

Application Demo :

Project Source Code:

<!-- make dynamic input field --> 

<div class="col-md-12"> 

<table class="table table-responsive"> 

<thead> 

<tr> 

<th>Info.</th> 

<th>Medicine Name</th> 

<th>Quantity</th> 

<th>Unit/Price</th> 

<th>Total</th> 

<th>Action</th> 

</tr> 

</thead>

<tbody class="row_container"> 

<tr id="div_{{$row_num}}"> 

<td> 

<a href="javascript:0" class="btn btn-warning"><i class="fa fa-info-circle"></i></a> 

</td> 

<td> 

<input type="text" name="medicine_name" class="form-control" placeholder="Medicine Name"> 

</td> 

<td> 

<input type="text" name="quantity" class="form-control" placeholder="Quantity" id="quantity"> 

</td> 

<td> 

<input type="text" name="unit_price" class="form-control" placeholder="Unit Price" id="unitprice"> 

</td> 

<td> 

<input type="text" name="total" class="form-control" placeholder="Total" id="total" style="cursor: pointer;" readonly> 

</td> 

<td> 

<a href="javascript:0" class="btn btn-danger"><i class="fa fa-minus" onclick="$('#div_{{$row_num}}').remove();"></i></a> 

</td> 

</tr> 

</tbody>

<tbody> 

<tr> 

<td colspan="3"></td> 

<td></td> 

<td></td> 

<td> 

<a href="javascript:0" class="btn btn-success" onclick="addrow();"><i class="fa fa-plus"></i></a> 

</td> 

</tr> 

<tr> 

<td colspan="3"></td> 

<td> <strong>Sub Total:</strong> </td> 

<td> 

<input type="text" name="subtotal" class="form-control" id="subtotal" value="0.00" readonly> 

</td> 

<td></td> 

</tr> 

<tr> 

<td colspan="3"></td> 

<td> <strong>VAT(%):</strong> </td> 

<td> 

<input type="text" name="" class="form-control" id="vat"> 

</td> 

<td></td> 

</tr>

<tr> 

<td colspan="3"></td> 

<td> <strong>VAT+Sub Total:</strong> </td> 

<td> 

<input type="text" name="" class="form-control" id="vatsubtotal" value="0.00" readonly> 

</td> 

<td></td> 

</tr> 

<tr> 

<td colspan="3"></td> 

<td> <strong>Paid:</strong> </td> 

<td> 

<input type="text" name="" class="form-control" id="paid"> 

</td> 

<td></td> 

</tr> 

<tr> 

<td colspan="3"></td> 

<td> <strong>Due:</strong> </td> 

<td> 

<input type="text" name="" class="form-control" id="due" value="0.00" readonly> 

</td> 

<td></td> 

</tr>

<tr> 

<td colspan="3"></td> 

<td> <strong>Grand Total:</strong> </td> 

<td> 

<input type="text" name="" class="form-control" id="grandtotal" value="0.00" readonly> 

</td> 

<td></td> 

</tr> 

</tbody> 

</table> 

</div>

<script type="text/javascript"> 

$(document).ready(function() { 

$("#total").click(function() { 

/*var quantity = document.getElementById("quantity").value;*/ 

var quantity = $("#quantity").val(); 

var unitprice = $("#unitprice").val(); 

var total = (quantity*unitprice); 

$('#total').val(total); 

$('#subtotal').val(total); 

});

$('#vat').change(function() { 

var vInput = this.value; 

var subtotal = $("#subtotal").val(); 

var vInput = ((vInput*subtotal)/100); 

var vstotal = (parseFloat(subtotal)+parseFloat(vInput)).toFixed(1); $('#vatsubtotal').val(vstotal); 

});

$('#paid').change(function() { 

var pInput = this.value; 

var vatsubtotal = $("#vatsubtotal").val(); 

if((pInput < vatsubtotal) || (pInput <= vatsubtotal)){ $('#paid').val(pInput); 

var dInput = (vatsubtotal-pInput); 

$('#due').val(dInput); 

var total = $("#total").val(); 

var subtotal = $("#subtotal").val(); 

var gtInput = (parseFloat(total)+parseFloat(subtotal)+parseFloat(vatsubtotal)).toFixed(1); $('#grandtotal').val(gtInput); 

}else{ 

alert('You are paying so much amount'); 

} 

});

});

</script>

In the following video, I'm showing all the steps. Please follow the all steps to create Invoice System Calculation Using Jquery, Laravel, Bootstrap and MYSQL.