Download AJAX client lookup

PHP

This script requires PHP. You can also other server side languages if you rewrite the code for getClient.php(See below)

Put this into your <HEAD> section

	<style type="text/css">
	body{
		background-repeat:no-repeat;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		height:100%;
		background-color: #FFF;
		margin:0px;
		padding:0px;
		background-image:url('/images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:85px;
	}
	
	fieldset{
		width:500px;
		margin-left:10px;
	}

	</style>
	<script type="text/javascript" src="/AJAX/ajax.js"></script>
	<script type="text/javascript">
	/************************************************************************************************************
	Ajax client lookup
	Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland
	
	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.
	
	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.
	
	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
	
	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.
	
	Alf Magne Kalleland, 2006
	Owner of DHTMLgoodies.com
	
	
	************************************************************************************************************/	
	var ajax = new sack();
	var currentClientID=false;
	function getClientData()
	{
		var clientId = document.getElementById('clientID').value.replace(/[^0-9]/g,'');
		if(clientId.length==4 && clientId!=currentClientID){
			currentClientID = clientId
			ajax.requestFile = 'getClient.php?getClientId='+clientId;	// Specifying which file to get
			ajax.onCompletion = showClientData;	// Specify function that will be executed after file has been found
			ajax.runAJAX();		// Execute AJAX function			
		}
		
	}
	
	function showClientData()
	{
		var formObj = document.forms['clientForm'];	
		eval(ajax.response);
	}
	
	
	function initFormEvents()
	{
		document.getElementById('clientID').onblur = getClientData;
		document.getElementById('clientID').focus();
	}
	
	
	window.onload = initFormEvents;
	</script>

Put this into your <BODY> section

	<form name="clientForm" action="ajax-client_lookup.html" method="post">	
	<fieldset>
		<legend>Client information</legend>
		<table>
			<tr>
				<td><label for="clientID">Client ID:</label></td>
				<td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
			</tr>
			<tr>
				<td><label for="firstname">First name:</label></td>
				<td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
			</tr>
			<tr>
				<td><label for="lastname">Last name:</label></td>
				<td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
			</tr>
			<tr>
				<td><label for="address">Address:</label></td>
				<td><input name="address" id="address" size="20" maxlength="255"></td>
			</tr>
			<tr>
				<td><label for="zipCode">Zipcode:</label></td>
				<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
			</tr>
			<tr>
				<td><label for="city">City:</label></td>
				<td><input name="city" id="city" size="20" maxlength="255"></td>
			</tr>
			<tr>
				<td><label for="country">Country:</label></td>
				<td><input name="country" id="country" size="20" maxlength="255"></td>
			</tr>
		</table>	
	</form>
	<p>In this script, AJAX is used to autofill the form fields after a valid client ID is entered. Valid client IDs in this example are 1001,1002,1003 and 1004.</p>
	</fieldset>

Download Javascript file

I have used the Simple Ajax Code Kit library(SACK) for this script. I have made a copy available for download here.

Put ajax.js in a subfolder called "js" or change the path to the file in the code above(i.e. <script type="text/javascript" src="js/ajax.js"></script>)

SQL

I have created a simple mySql table for this example. You can copy the queries from here

File for client lookup

A php file getClient.php is used in this script. This PHP file is called by Ajax when a new client ID is entered into the first text field. It will connect to the database and try to find a client with the entered client ID. If one is found, it will send data back to AJAX. These data will evalulated by our main script.

The getClient.php file looks like this:

<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect("host","username","password");
mysql_select_db("databaseName",$connection);

if(isset($_GET['getClientId'])){
  $res = mysql_query("select * from ajax_client where clientID='".$_GET['getClientId']."'") or die(mysql_error());
  if($inf = mysql_fetch_array($res)){
    echo "formObj.firstname.value = '".$inf["firstname"]."';\n";
    echo "formObj.lastname.value = '".$inf["lastname"]."';\n";
    echo "formObj.address.value = '".$inf["address"]."';\n";
    echo "formObj.zipCode.value = '".$inf["zipCode"]."';\n";
    echo "formObj.city.value = '".$inf["city"]."';\n";
    echo "formObj.country.value = '".$inf["country"]."';\n";

  }else{
    echo "formObj.firstname.value = '';\n";
    echo "formObj.lastname.value = '';\n";
    echo "formObj.address.value = '';\n";
    echo "formObj.zipCode.value = '';\n";
    echo "formObj.city.value = '';\n";
    echo "formObj.country.value = '';\n";
  }
}
?>

Partners / Sponsors:
Domain Development