Create Dynamic Invoice Form Using PHP

Khawar Islam
Feb 25, 2016

176.8k
0
4
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction:

Today, I am starting to write an article about dynamic invoice forms in PHP because we need this type of form in a professional way and it is very beneficial for project study because we cant know the actual rows.

Step 1:

First we open the localhost and click on phpmyadmin on the left side, then make two tables names as tbl_orderdetail and tbl_order, but remember to make a primary key in both tables and check the AUTO INCREMENT box.You see the structure of both tables here.

TABLE NAME: tbl_orderdetail

TABLE

TABLE NAME: tbl_order

TABLE

Step 2:

Then we add some online libraries of JavaScript, jQuery and bootstrap in it, and if you want work offline you also download the libraries and make an invoice folder and make three sub folders and put all three libraries in it and then add in the main form, which is known as index.php, which means make a file in notepad++ and save as .php extension. Here you can see the code, I added online libraries as well as offline libraries.

code

Step 3:

Now we design the receipt form by declaring the two input and labels tags in the form and one button and put some bootstrap classes to make a unique form like this,

form

Here is the code you can see that we declare the form tag and then you see that in div tag we declare the class in it; this class is basically the bootstrap class.

code

Step 4:

Now we design invoice table, and make a table. It is mandatory that you have knowledge about how to create a table in HTML. Then after creating a table we add some bootstrap classes to make a table unique.

table

Here is the code,

code

Step 5:

Now we add JavaScript function because you can see that in table on right side the plus button is appearing; the function of this button is that when you press this button automatically a row is added because we designed it dynamically. If user need two rows then they add two rows so we give the choice to the user, so for this approach we make JavaScript function,

table

Here is the code,

code

Step 6:

Now inthe previous step you can see that the total sum is calculated, and we also declare some formulas but discount columns. You can better understand when you see the coding.

code

Step 7:

Now we make a connection in this file but it’s not good practice. You can make it separate; it is better and good practice. In this setup we put two insert queries to save the information of invoice tables and you also know that the rows are undefined because it depends upon the user, so we put loop to count the rows and then put it in database. Here is the code you can understand better.

code

Step 8:

Now I share the full source code to understand better.

<?php
$cn=mysql_connect('localhost','root','');
if ($cn)
{
mysql_select_db('inv',$cn);
}
if(isset($_POST['save']))
{
$name=$_POST['name'];
$location=$_POST['location'];
mysql_query("insert into tbl_order(name,location) VALUES ('$name','$location')");
$id=mysql_insert_id();
for($i = 0; $i<count($_POST['productname']); $i++)
{
mysql_query("INSERT INTO tbl_orderdetail
SET
order_id = '{$id}',
product_name = '{$_POST['productname'][$i]}',
quantity = '{$_POST['quantity'][$i]}',
price = '{$_POST['price'][$i]}',
discount = '{$_POST['discount'][$i]}',
amount = '{$_POST['amount'][$i]}'");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
</head>
<scriptsrc="//code.jquery.com/jquery-1.12.0.min.js">
</script>
<scriptsrc="//code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<body>
<form action="" method="POST">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Invoice </h3>
</div>
<div class="box-body">
<div class="form-group">
ReceiptName
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
Location
<input type="text" name="location" class="form-control">
</div>
</div>
<input type="submit" class="btnbtn-primary" name="save" value="Save Record">
</div><br/>
<table class="table table-bordered table-hover">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Amount</th>
<th><input type="button" value="+" id="add" class="btnbtn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td class="no">1</td>
<td><input type="text" class="form-control productname" name="productname[]"></td>
<td><input type="text" class="form-control quantity" name="quantity[]"></td>
<td><input type="text" class="form-control price" name="price[]"></td>
<td><input type="text" class="form-control discount" name="discount[]"></td>
<td><input type="text" class="form-control amount" name="amount[]"></td>
<td><a href="#" class="remove">Delete</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
</tfoot>
</table>
</form>
</body>
</html>
<script type="text/javascript">
$(function()
{
$('#add').click(function()
{
addnewrow();
});
$('body').delegate('.remove','click',function()
{
$(this).parent().parent().remove();
});
$('body').delegate('.quantity,.price,.discount','keyup',function()
{
vartr=$(this).parent().parent();
varqty=tr.find('.quantity').val();
var price=tr.find('.price').val();
var dis=tr.find('.discount').val();
varamt =(qty * price)-(qty * price *dis)/100;
tr.find('.amount').val(amt);
total();
});
});
function total()
{
var t=0;
$('.amount').each(function(i,e)
{
varamt =$(this).val()-0;
t+=amt;
});
$('.total').html(t);
}
functionaddnewrow()
{
var n=($('.detail tr').length-0)+1;
vartr = '<tr>'+
'<td class="no">'+n+'</td>'+
'<td><input type="text" class="form-control productname" name="productname[]"></td>'+
'<td><input type="text" class="form-control quantity" name="quantity[]"></td>'+
'<td><input type="text" class="form-control price" name="price[]"></td>'+
'<td><input type="text" class="form-control discount" name="discount[]"></td>'+
'<td><input type="text" class="form-control amount" name="amount[]"></td>'+
'<td><a href="#" class="remove">Delete</td>'+
'</tr>';
$('.detail').append(tr);
}
</script>