Please support us by disabling ad blocker for smarttutorials.net ...

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….
 

jquery autocomplete integration

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.

Download Invoice System Script

Instant Download This Script

 

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] muni[at]smarttutorials.net

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.

  • balu k

    hi,

    Awesome invoice… Please add print functionality and as well as download invoice in pdf format.

  • Thank You Balu… Sure I will add it soon.. 🙂

  • balu k

    its just my opinion .. i thought another one functionality like sending invoice pdf by email..

  • yes i already in the process to add those functionalities… i will add it soon… Thank you 🙂

  • Jim

    Excellent development, many thanks Muni, i just wonder if i want to add a discount value before calculation of every line.

  • Hi Jim,

    Yes You can … pls modify following script to add discount value..

    //price change
    $(document).on(‘change keyup blur’,’.changesNo’,function(){
    id_arr = $(this).attr(‘id’);
    id = id_arr.split(“_”);
    quantity = $(‘#quantity_’+id[1]).val();
    price = $(‘#price_’+id[1]).val();
    if( quantity!=” && price !=” ) $(‘#total_’+id[1]).val( (parseFloat(price)*parseFloat(quantity)).toFixed(2) );
    calculateTotal();
    });

  • jonah

    Excellent development and big thanks to you. I just wonder how possible it could be to have a quantity type field for example i can sell out drugs as tablets or as sackets with the price varying.

  • yes you can, add quanity type field as drop down in the table..based dropdown selection you change the price…

  • jonah

    I have tried implementing with a drop down but then the challenge I have is that it cant pick the price of the exact product. All it does is, it picks for me the quantity type and in my ajax script i am doing a SELECT but then I need to know how to filter in my WHERE clause so that i can pick the price of that product for that quantity type.

  • pls check on ajax request you are sending selected quantity type… if it yes .. then add add that quantity_type in where clause like that WHERE QUANTITY_TYPE = ‘selected quantity type’;

  • jonah

    this is how it is; $qtype=$_POST[‘qtype’]; //get the selected quantity type $mj=mysql_query(“SELECT * FROM productlist WHERE qtype=’$qtype'”);
    // the above statement does do what i want as it doesn’t filter records based on the chosen quantity type and product name;
    Also i wonder how possible it is to pass two different values with the onchange attribute such that my code can as below;

    $pname=$_POST[‘productName’];// product name passed through ajax $qtype=$_POST[‘qtype’]; //get the selected quantity type $mj=mysql_query(“SELECT * FROM productlist WHERE qtype=’$qtype’ AND product_name=’$pname'”);
    //this query would filter results based on the quantity type selected and the product selected

  • gworks

    Hi, Nice needed tutorial. Adding multiple items, total gets added. But if I delete any items, total not getting decreased

  • thank you fixed.. check now…

  • hi,
    pls pass number of required parameters like this.

    data: {
    name_startsWith: request.term,type: type,productName: ‘nameofProduct’}

  • Jim

    Hi there how can we check it?

  • check in demo page … pls clear your browser cache and check

    http://demo.smarttutorials.net/invoice-generator-jquery-autocomplete/

  • gworks

    It works fine. Does this fix updated in download script?

  • ya… for that we need to keep added item no. in array, then every time you going to add item need to check with that array of item nos…. if exists we need to show the alert with that message… if you need will update that too….

  • gworks

    Oh yes. Please update for me.

  • pribad

    Hi, I still have no ideas when we will edit the data after saved in the same format , Could you give a clue in the next tutorial ? thanks in advance

  • Eudomar

    como podria formatear los numeros ej 1000.00 a 1.000,00 en los campos de la factura

  • jonah

    hello Muni; Thanks for your continuous efforts in mentoring us into becoming better developers; I do have problem; I would like to program a sales receipt , printable after a transaction but trust me i have no idea where to pick this up from. Thanks

  • dil

    Thanks for your great tutorial. I implemented it. It works like a chime.
    I want to make all input areas (country, name, fruit …) as one input and using drop-down list to trigger database column selection for individual cases. if you select “country” the autocomplete only shows “country” list, if you select “fruit”, the autocomplete only suggest “fruit”, how to do it, please help. Thanks.

  • Sam

    Hi, your script is amazing but it is very dificult to download. You should not force people to suscribe in order to download. Either you give the script for free without forcing people to do anything or you just choose to charge for your script. thanks

  • Hassan

    Hi, I tried downloading and it does not work even though i subscribed yesterday still did not get a link

  • ABEER

    No doubt its a nice simple and very useful script. a big hats off for you Muni. i need help
    1. i want to add a files discount after the the filed amount paid. is it possible? please help me out…
    2.How to insert these datas to mysql table?? any help link for this?

  • freddy

    wow your cool murni, full ajax and jquery, really apreciate that

  • freddy

    Hello Admin, need some help to asking ?

  • freddy

    murni please respon how can i change number format, if indonesian number format will be like this 1.000.000, will big thanks for you, please respon as fast as possible , sorry if this comment feel you distrub, thanks

  • freddy

    done

  • freddy

    DONE

  • freddy

    Murni how about if in table there is stock nad i amke it hidden in table, when user typing quantity and make it in alert where suppose to be added in your jquery script, really need help, will big thanks for any help,

    Freddy Sidauruk

  • If user enters quantity higher than quantity of stock in hidden field, then you need to show alert right?…

  • freddy

    Yes Murni how can i do that ? Sorry to much asking here, Thanks for respon

  • freddy

    i have logic, i should hidden stock with class because if id only work in first row , am i right ?

    and use keyup and get the value user entering and trying compare with stock type hidden, but how can i do that in jquery, i’m really new in jquery?

  • $(document).on(‘focus’,’.classname’,function(){
    type = $(this).val();
    id_arr = $(this).attr(‘id’);
    id = id_arr.split(“_”);
    element_id = id[id.length-1];

    …..
    });

    hope this will help you….

  • freddy

    where is should put murni in this file cause i have modifi as needed, if you dont mind here is my js file and html, and this demo i make for compare two field please take look first murni
    http://jsfiddle.net/dauruk0512/v7z33oqy/

    http://pastebin.com/Ggi2FAzw javascript

    file html http://pastebin.com/XPRFvDgt describe problem on the line 122

    thanks for respon,

  • freddy

    Done, i use this, any my problem now why i make edit it cannot succes murni, Thanks for your effort make some people have eagerness to learn jquery, please make form for edit if you free murni ?

    $(document).on(“keyup”,”.quantity”, function()
    {
    var quantity = $(this).val();
    var stock = $(this).parents(‘tr’).find(“td .stock”).val();
    if ( parseInt(quantity) > parseInt(stock))
    {
    alert (‘Data lebih besar’);
    //$(‘:input[type=”text”].quantity’).css(“background-color”,”red”)
    }
    });

  • freddy

    Done by change toFixed(2) to be toFIxed(0)

  • Bijon Ahmed

    Dear brother, How to use php ci please help me. pls pls

  • Stephan A.J.

    Hi Muni, first of all thank you for this amazing tutorial. I need the text input emptied if someone decided not to click any result from the drop down menu. This is to prevent inserting unknown Product ID to the database. thx

  • segunoyebode

    what if you wanna populate them into database how will you do that?

  • segunoyebode

    i want to populate then into database what can i do please?

  • chandrasekhar pachari

    Hi Muni thanks a lot for the tutorial…i have one doubt how to add dropdown which we get data from mysql please help me

    Thanks And Regards,
    Chandra sekhar

  • chandrasekhar pachari

    I mean to say when we click add you are displaying textboxes na in that place i want to show dropdown which we get data from mysql

  • Callum Burns

    What a load of junk this site is! Try and get a download link, wait 12 hours to find that the link sent doesn’t work! Just give us a link that works without the signing up junk! Geez!

  • Alba Marquinos

    I bought this script and i am having problem using it. When i create an
    invoice with more than 1 column and save, it submit all the column, but
    when i print invoice it only echo out 1 single column please help on
    this.

  • Hari

    Please add SL No and Discount options

  • Niel Daculan

    HOW CA IN FILTER THE SAME PRODUCT NAME or when i choose thesame product it will add…thanks

  • nery ann Lirio

    how to automatically calculate the dynamic textboxes that has been added?

  • pguru

    Let’s say on demo we can add S10_1678 as many we want. How to filter only one product name per row?

  • web developer

    nice one.Please i need Invoice System Using jQuery AutoComplete.Please email me the whole source code through web.developerbj@gmail.com. i will be very thankfull to you.i am a student and will get idea from this project.

  • Priyank

    have you fixed this ?? I also need the same to double check the user has not inputed wrong product.

  • Hari Om

    nice script but if subscribe this and start implantation product auto complete is not working

  • hi hari,

    Please check when you strat typing it making ajax request…. Also check you made any js mistakes.

  • pguru

    Let’s say on demo we can add S10_1678 as many we want. How to filter only one product name per row?

  • Radit

    Hi sorry im new be. Can i get source code for save to database please ?

  • Sent.

  • ADEBISI JOSEPH

    Hi Muni please i need this script my mail is adebisijoe@gmail.com

  • ADITYA SHANKER

    Hey can some one mail me the source code.?. I have already subscribed but didnt get the source code
    my id is – f2011244@dubai.bits-pilani.ac.in

  • ADITYA SHANKER

    Hey Muni nice work. I subscribed 12 hours back still didn’t get the source code. Please advise.
    Also could you please send the source code for adding these table entries in a database with a submit button.

    So if I select 3 items and press submit a new entry is created in the database which states the invoice details.

    Thanks in advance.

  • Eko Budi

    Hi Muni, can you show me about print.php .. this is my first time learn PHP. thanks.

  • Eni Ire Badmus

    am working wirh UCM pro script and I want to have this invoice numbering

    If customer A get 50 jobHHours

    He will Have an invoice of

    BD0001KK – BD0051KK

    BD = Suffix

    0001 = Initial No Of Job Hours

    KK is the prefix

    if the next customer B get 70 jobHours

    he will also have an invoice of

    BD0051CC – BD0121CC

    BD is the suffix

    CC is the prefix

    till

    BD9999PREFIX

    and it will now start from

    BE0000 – BE9999…

    BZ9999

    CA9999…

    ….ZZ9999

    and will start all over from

    A0000

  • Tri Harto

    hello, i’ll trying to save data to database. but i don’t understand to post or get data method . can i get source code for save to database to!
    triharto.12118810@gmail.com

  • Tri Harto

    hello, i’ll trying to save data to database. but i don’t understand to
    post or get data method . can i get source code for save to database to!

    triharto.12118810@gmail.com

  • ramya

    hi
    can i add sql server database in this form rather than mysql.is it possible to connect sql server.please help me.

  • Prince

    Please provide a script.
    Email Id: princebajaj@gmail.com

  • Prince

    Please send me the source code muni.
    Email Id: aroragourav839@gmail.com
    Thank’s………

  • Prince

    Please Provide Invoice System Using jQuery Auto Complete.
    Email: princebajaj224@gmail.com
    Thank’s.

  • priyankasurya

    Nice invoice script and easy to understand to script … Please i need to add print functionality ,download invoice in pdf format ,send email for invoice script code plz send source code for this mail id priyankasurya1320@gmail.com
    Anyway thank you soo much

  • priyankasurya

    I refereed to your site for invoice details. I have one doubt for invoice edit page add or delete for table row suppose i remove table row delete and automatic delete from database plz how to work to this concept

  • what is your exact requirement?

  • priyankasurya

    I need to edit invoice page check to check box multiple check box delete to multiple data table and also delete from database.

  • ali

    hi can i get your sour code plz

  • ali

    i am student i need your help can i get the source of invoice autocomplete plz
    email me at ali.don778899@gmail.com
    i shall b very thankfull to you

  • ali

    muni plz send the source code too

  • ali

    plz forward me the source code ali.don778899@gmail.com
    @smarttutorials:disqus kindly mail me the source code

  • freddy

    did you solved it ? please share to me

  • Sharad Gupta

    plz send me the invoice code

  • Sharad Gupta

    send me the code of this invoice at sharadg331@gmail.com plz its urgent

  • Ghufran Javed

    Hi Muni,

    First thanks for this wonderful invoice system script, i want to add extra field in it i.e. Other Charges/Courier Charges.

    So how can i add this and get the sum.

  • Roberto

    I found a problem while adding/deleting rows, here:

    //adds extra table rows
    var i=$(‘table tr’).length;
    $(“.addmore”).on(‘click’,function(){

    Lets assume the first row has the id itemNo_1. We fill that row and proceed to add a second row, which will have the id itemNo_2. If we delete the first row, itemNo_1, and add a second row, we will end up with two rows with the same id, itemNo_2.
    To search for unassigned ids, I modified the code with this:

    //adds extra table rows
    for (i=1; i<=100; i++) {
    if (!$('#itemNo_'+i).val()) break;
    }
    $(".addmore").on('click',function(){

    This will search for the next free id , from 1 to 100.

  • Amit Mishra

    Hi Muni!! I have tried your program written above in which the fetching of data is successfully running. Can you please share the “calculateTotal()” function you have used in your program? Please share the function code also so that I can understand better what is to be done with calculateTotal() function? And can you please suggest me how can I work on jquery in my projects? I know all of its syntax and examples from tutorial websites like http://www.w3schools.com and http://www.javatpoint.com but what I don’t know is how to use it in any kind of project.Please help me in this also.

  • RAJESH MOURYA

    mail me code plz buddy
    rajeshmourya202@gmail.com

  • RAJESH MOURYA

    need urgently

Get Instant Script Download Access!