Invoice Script PHP jQuery

jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax

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

In this tutorial we are going to see how to implement jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax. Please check my previous tutorial on this jQuery UI autocomplete before continuing this tutorial.

jquery autocomplete integration

Invoice System Using jQuery PHP MySQL And Bootstrap

Invoice System Using jQuery AutoComplete

jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL

jQuery Autocomplete Post Tagging System Like In WordPress

Two Fields jQuery UI Autocomplete Using Jquery PHP MYSQL

Google Address Autocomplete API

jQuery UI Autocomplete For Two Fields Using PHP Ajax and MySQL

Steps:
1. Create Full Screen Bootstrap Modal Popup.
2. Adding Invoice HTML Form inside Full Screen Bootstrap Modal Popup.
3. Integrating jQuery UI autocomplete in the Bootstrap Modal Popup.

Demo jQuery UI autocomplete in Bootstrap Modal
jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax

 

Create index.php file and add basic HTML markup in it.

Create “modal_auto” folder in your server root (htdocs or www) directory. Now create index.php, css & js folders, and add the following basic html in index.php file. Also download bootstrap, jQuery, jQuery UI from their respective sites and add it to their css and js folders. (or else download source file and use it.)


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>Modal jQuery Autocomplete</title>
		<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
		<link href="css/jquery-ui.min.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		
    	<link href="css/datepicker.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/dataTables.bootstrap.min.css" />
		<link href="css/style.css" rel="stylesheet">
		
	</head>
<body>

	
	<script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/dataTables.bootstrap.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>
HTML
Copy

Download jQuery UI Autocomplete Script

Instant Download This Script

You may also interested in Learning jQuery Autocomplete from scratch. Checkout Video Tutorials series on: jQuery UI Autocomplete from Scratch

Learn jQuery Autocomplete in 3 Minutes

Create Full Screen Bootstrap Modal Popup.

Here our HMTL markup for full screen bootstrap modal popup. Add this following markup in the index.php itself.


<div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Create Invoice</h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<h2>From,</h2>
							<div class='row'>
								<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'>
									<div class="form-group">
										<input type="email" class="form-control" id="companyName" placeholder="Company Name">
									</div>
									<div class="form-group">
										<textarea class="form-control" rows='3' id="companyAddress" placeholder="Your Address"></textarea>
									</div>
								</div>
							</div>
							<h2>To,</h2>
							<div class='row'>
								<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'>
									<div class="form-group">
										<input type="email" class="form-control" id="clientCompanyName" placeholder="Company Name">
									</div>
									<div class="form-group">
										<textarea class="form-control" rows='3' id="clientAddress" placeholder="Your Address"></textarea>
									</div>
									
								</div>
								<div class='col-xs-12 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-sm-4 col-md-4 col-lg-4'>
									<div class="form-group">
										<input type="number" class="form-control" id="invoiceNo" placeholder="Invoice No">
									</div>
									<div class="form-group">
										<input type="date" class="form-control" id="invoiceDate" placeholder="Invoice Date">
									</div>
									<div class="form-group">
										<input type="number" class="form-control amountDue" id="amountDueTop" placeholder="Amount Due">
									</div>
								</div>
							</div>
							<h2>&nbsp;</h2>
							<div class='row'>
								<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
									<table class="table table-bordered table-hover" id="table_auto">
										<thead>
											<tr>
												<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
												<th width="15%">Item No</th>
												<th width="38%">Item Name</th>
												<th width="15%">Price</th>
												<th width="15%">Quantity</th>
												<th width="15%">Total</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><input class="case" type="checkbox"/></td>
												<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
												<td><input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
												<td><input type="number" name="price[]" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
												<td><input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
												<td><input type="number" name="total[]" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							
							<div class='row'>
								<div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'>
									<button class="btn btn-danger delete" type="button">- Delete</button>
									<button class="btn btn-success addmore" type="button">+ Add More</button>
								</div>
								<div class='col-xs-12 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-5 col-md-5 col-lg-5'>
									<form class="form-inline">
										<div class="form-group">
											<label>Subtotal: &nbsp;</label>
											<div class="input-group">
												<div class="input-group-addon">$</div>
												<input type="number" class="form-control" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
											</div>
										</div>
										<div class="form-group">
											<label>Tax: &nbsp;</label>
											<div class="input-group">
												<div class="input-group-addon">$</div>
												<input type="number" class="form-control" id="tax" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
											</div>
										</div>
										<div class="form-group">
											<label>Tax Amount: &nbsp;</label>
											<div class="input-group">
												<input type="number" class="form-control" id="taxAmount" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
												<div class="input-group-addon">%</div>
											</div>
										</div>
										<div class="form-group">
											<label>Total: &nbsp;</label>
											<div class="input-group">
												<div class="input-group-addon">$</div>
												<input type="number" class="form-control" id="totalAftertax" placeholder="Total" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
											</div>
										</div>
										<div class="form-group">
											<label>Amount Paid: &nbsp;</label>
											<div class="input-group">
												<div class="input-group-addon">$</div>
												<input type="number" class="form-control" id="amountPaid" placeholder="Amount Paid" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
											</div>
										</div>
										<div class="form-group">
											<label>Amount Due: &nbsp;</label>
											<div class="input-group">
												<div class="input-group-addon">$</div>
												<input type="number" class="form-control amountDue" id="amountDue" placeholder="Amount Due" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
											</div>
										</div>
									</form>
								</div>
							</div>
							
							<h2>Notes: </h2>
							<div class='row'>
								<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
									<div class="form-group">
										<textarea class="form-control" rows='5' id="notes" placeholder="Your Notes"></textarea>
									</div>
								</div>
							</div>
						
							<!-- End Here -->
						
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
HTML
Copy

Here is the bootstrap modal popup launcher button, which has id of the modal in the data-target property.


<button class="btn btn-lg btn-success text-center pull-right" data-toggle="modal" data-target="#modal-fullscreen">Create Invoice</button>
HTML
Copy

Here is the CSS to set Our Bootstrap Modal popup to full screen. This bootstrap modal popup also responsive one, because based on the viewport size it will automatically resize by itself.


/*
Full screen Modal 
*/
.modal-fullscreen .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
     width: 1170px;
  }
}
CSS
Copy

Integrating jQuery UI autocomplete in the Bootstrap Modal Popup

Here I have integrated the jQuery UI autocomplete event to the textbox which has class of autocomplete_txt. So whenever user types something in the textbox which has class of autocomplete_txt, then autocomplete is event triggered. That will make ajax call to the mentioned URL.

Please refer following tutorial for detailed discussion of autocomplete integration.

Invoice System Using jQuery AutoComplete

Note : By default autocomplete options will append to body tag if you not specify appendTo option. To display autocomplete suggestions textbox in the Bootstrap modal popup we need to sepcify appendTo option to “#modal-fullscreen” (modal popup id).


//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,
		appendTo: "#modal-fullscreen",
		select: function( event, ui ) {
			var names = ui.item.data.split("|");
			id_arr = $(this).attr('id');
	  		id = id_arr.split("_");
	  		console.log(names, id);
	  		
			$('#itemNo_'+id[1]).val(names[0]);
			$('#itemName_'+id[1]).val(names[1]);
			$('#quantity_'+id[1]).val(1);
			$('#price_'+id[1]).val(names[2]);
			$('#total_'+id[1]).val( 1*names[2] );
			calculateTotal();
		}		      	
	});
});
JavaScript
Copy

Also refer following this tutorial for dynamically add and removal of table rows using jQuery.

Add Remove Table Rows Dynamically Using jQuery

Crate ajax.php File To Handle jQuery autocomplete event Ajax Request:

First create config.php file, where we will keep all site wide configurations and database credentials.


<?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();
PHP
Copy

Now create ajax.php file and include that config.php file in it, also add the following php script that handle ajax request that comes from autocomplete event.


<?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;
}
PHP
Copy

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

Get Access Now Instantly

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.

Get Instant Script Download Access!

no thanks