Quick Lookup Form

Contact Us or call 1-877-932-8228
Quick Lookup Form

Quick Lookup Form

In some cases, you need to get quick information from a database, but you don't want to process an entire page. For example, you may have a form for requesting information about an order. The form might have multiple fields, one of which is the order id. The order id is not required, but if it's filled in it must match an existing order id in the database. Rather than waiting to check the order id until the user fills out and submits the entire form, you can use Ajax to flag a bad order id as soon as the user tabs out of that field. A simple sample interface is shown below:Simple Interface

When the user enters an order id that is not in the database, an error is displayed and the submit button becomes disabled:Submit Button Disabled

When the user enters a valid order id, an icon is displayed indicating that the order id exists and the submit button becomes enabled:Submit Button Enabled

The code is shown below. Remember to start the Node.js server, if it isn't already running:

  1. Open the command line (on a PC) or terminal (on a Mac), and navigate to the directory AjaxApplications/Demos/.
  2. Type npm start to start the Node.js server.
  3. View http://localhost:8080/Lookup.html in your browser to see the page.

Code Sample:

<meta charset="UTF-8">
<title>Order Lookup Form</title>
<link href="Lookup.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
	function lookup(order) {
		var orderNum = order.value;
		var xmlhttp = new XMLHttpRequest();
		var btnSubmit = document.getElementById("SubmitButton");
		var output = document.getElementById("OrderNumError");

		btnSubmit.disabled = true;
		if (orderNum.length == 0) { //OK to submit
			output.innerHTML = "";
			btnSubmit.disabled = false;
			return true;
		if (isNaN(orderNum)) { //Error
			output.innerHTML = "Must be numeric.";
			order.style.color = "red";
			btnSubmit.disabled = true;
			return true;

		//Look up order number in database
		xmlhttp.open("GET", "Lookup?orderNum=" + orderNum, true);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

		function lookupResults(xmlhttp) { //Callback function
			if (xmlhttp.responseText.indexOf("success") == -1) { //Error: no match
				output.innerHTML = "No such order number.";
				order.style.color = "red";
				btnSubmit.disabled = true;
			} else {
				output.innerHTML = "<img src='check.gif'>";
				order.style.color = "green";
				btnSubmit.disabled = false;

		return false;

	observeEvent(window, "load", function() {
		var order = document.getElementById("OrderNum");
		observeEvent(order, "blur", function() {
<form id="LookupForm" onsubmit="alert('Form would submit.'); return false;">
	<h1>Lookup Form</h1>
	<p>Enter an order number.</p>
	<div class="FormRow">
		<label for="OrderNum">Order Number:</label>
		<input type="text" size="10" id="OrderNum" name="OrderNum">
		<span id="OrderNumError"></span>
	<div class="FormRow">
		<label for="Comments">Comments:</label><br >
		<textarea id="Comments" name="Comments" cols="40" rows="4"></textarea>
	<div class="FormRow">
		<input type="submit" id="SubmitButton" value="Submit">

The first thing that the Lookup function does is disable the submit button, so that the user does not have the opportunity to click it while the request is pending. We have also made the function return false if an Ajax request is made, to further ensure that the user cannot successfully click the submit button before the request completes.

The server-side piece of the lookup form is generated by the /Lookup GET route in AjaxApplications/Demos/server.js:

app.get('/Lookup', function(req, res) { var orderNum = req.param('orderNum'); var sql = "SELECT OrderID FROM Orders WHERE OrderID = " + orderNum; db.serialize(function() { db.get(sql, function(err, row) { if(err !== null) { res.status(500).send("An error has occurred -- " + err); } else { if (row) { res.status(200); return res.send("success"); } else { res.status(200); return res.send("failed"); } } }); }); });

The server-side script simply return "success" if the order number is found or "failed" if it is not, querying the database by order number.