Invoice System Using jQuery AutoComplete

Posted by & filed under Ajax, CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

In this tutorial we are going to see invoice system using jQuery autocomplete. Sure this invoice software will helpful for the samll bussiness owners. This invoice generator has following features.

Please checkout our new version of Smart Invoice System Version 3….
 

I have released series of tutorial on jQuery UI autocomplete right from the scratch, Please check here jQuery UI Autocomplete Video Tutorials

Learn jQuery Autocomplete in 3 Minutes

Please refer my latest Invoice application with numerous features are added

Invoice System Using jQuery PHP MySQL And Bootstrap

PHP Invoice System

1. When user enters product name or product Id, it will shows auto suggestion of product name/id using jQuery autocomplete and then automatically fills the selected product id, product name, price and product quantity in their respective fields.

2. User can able to add delete any number table rows to add/delete product in the invoice system.

3. Calculation of total Line item price i.e. number item * unit price

4. Tax calculation.

5. Calculation of payment paid and payment due.

6. This invoice system has nice interface sample invoice form.

I had will add invoice print, invoice preview, invoice template, invoice emailing and some of the new features in the coming tutorial. Here is the invoice sample.

 

Invoice System Using jQuery AutoComplete

 

Create Sample Invoice System Database:

Before continuing this tutorial please create sample database with tables. For example I had created sample database in the name of ‘Invoice’ and it’s table products.

Use the following sample SQL queries to create your sample database with tables.

--
-- Database: `invoice`
--
CREATE DATABASE IF NOT EXISTS `invoice` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `invoice`;

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE IF NOT EXISTS `products` (
  `productCode` varchar(15) NOT NULL,
  `productName` varchar(70) NOT NULL,
  `productLine` varchar(50) NOT NULL,
  `productScale` varchar(10) NOT NULL,
  `productVendor` varchar(50) NOT NULL,
  `productDescription` text NOT NULL,
  `quantityInStock` smallint(6) NOT NULL,
  `buyPrice` double NOT NULL,
  `MSRP` double NOT NULL,
  PRIMARY KEY (`productCode`),
  KEY `productLine` (`productLine`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insert some dummy data to test.

Add jQuery, jQuery UI and Bootstrap CSS Files To design This Sample Invoice System:

Create index.php file and add the following css files in it.

<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Please ensure following js files are added in your index.php file.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/auto.js"></script>

Design Invoice Template Using HMTL and Bootstrap CSS:

Design your own invoice template using html and css. I had used html and twitter bootstrap to design this free invoice template.

Download this free invoice software script using below link.

 

Invoice System Table Row Add and Delete using jQuery:

I had done this dynamic table row add and remove functionality using jQuery. This functionality will helpful for user to do bulk deletion of product in this invoice generator.

Please refer my prevoius tutorial on this dynamic table row add and delete using jQuery.

  1. Add & Remove Table Rows Dynamically Using jQuery
  2. Dynamically Add and Remove Textbox Using jQuery

Here is the my jQuery script to add and remove tables rows dynamically.

 

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
	html = '<tr>';
	html += '<td><input class="case" type="checkbox"/></td>';
	html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
	html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
	html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
	html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
	html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
	html += '</tr>';
	$('table').append(html);
	i++;
});

//deletes the selected table rows
$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
	$('#check_all').prop("checked", false); 
});

jQuery AutoComplete for Invoice Module:

I had integrated jquery UI autocomplete in this easy invoice software. Please refer my previous tutorial on this jQuery autocomplete.

  1. jQuery Autocomplete Multiple Fields Using jQuery, Ajax, PHP and MySQL
  2. jQuery Autocomplete Search using PHP, MySQL and Ajax
  3. jQuery Autocomplete Post Tagging System Like In WordPress

In my previous tutorial i had written hundreds of lines of code for this jquery UI autocomplete. I had over simplified number lines required for this jquery UI autocomplete in this tutorial.

Here is the my over simplified jQuery UI autocomplet script.

//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
	type = $(this).data('type');
	if(type =='productCode' )autoTypeNo=0;
	if(type =='productName' )autoTypeNo=1; 	
	$(this).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url : 'ajax.php',
				dataType: "json",
				method: 'post',
				data: {
				   name_startsWith: request.term,
				   type: type
				},
				 success: function( data ) {
					 response( $.map( data, function( item ) {
					 	var code = item.split("|");
						return {
							label: code[autoTypeNo],
							value: code[autoTypeNo],
							data : item
						}
					}));
				}
			});
		},
		autoFocus: true,	      	
		minLength: 0,
		select: function( event, ui ) {
			var names = ui.item.data.split("|");						
			id_arr = $(this).attr('id');
	  		id = id_arr.split("_");
	  		element_id = id[id.length-1];
			$('#itemNo_'+element_id).val(names[0]);
			$('#itemName_'+element_id).val(names[1]);
			$('#quantity_'+element_id).val(1);
			$('#price_'+element_id).val(names[2]);
			$('#total_'+element_id).val( 1*names[2] );
			calculateTotal();
		}		      	
	});
});

Database Configuration For This jQuery Autocomplete Invoice System:

It always comfortable to keep database configuration and site level configuration in a separate config file. So please create config.php file and define your database connections details and site wide configuatation.

 

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'invoice');
define('DB_USERNAME','root');
define('DB_PASSWORD','');


$con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if( mysqli_connect_error()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

Create Ajax Handler PHP File For This jQuery Autocomple Invoice Module:

Please create ajax.php file which is going to handle autocomplete ajax request. This will make connection to MySQL database and fetches the matched records from database, then finally sends that response to the client side to show suggestion to user.

Here is the my Ajax Handler PHP script.

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
require_once 'config.php';
if(!empty($_POST['type'])){
	$type = $_POST['type'];
	$name = $_POST['name_startsWith'];
	$query = "SELECT productCode, productName, buyPrice FROM products where quantityInStock !=0 and UPPER($type) LIKE '".strtoupper($name)."%'";
	$result = mysqli_query($con, $query);
	$data = array();
	while ($row = mysqli_fetch_assoc($result)) {
		$name = $row['productCode'].'|'.$row['productName'].'|'.$row['buyPrice'];
		array_push($data, $name);
	}	
	echo json_encode($data);exit;
}

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!