Mysql lookup when input box loses focus

[maffp]

Hi!

I’m creating a order sheet for my business using PHP and Mysql but I’m not sure of how to do something.

My page will have many lines of three input text boxes:

 ... [item] ... [quantity]

What I would like to do is scan a barcode using my barcode scanner whilst the cursor is in the 'code' input box. Then when I click tab (actually the barcode scanner will tab automatically when scanning the barcode) I would like to lookup the barcode in a database table containing my entire list of products and have the corresponding item name appear in the 'item' input box. Then I can enter quantity and tab to the next line.

Any ideas on how I can do this? I'm guessing onblur javascript would have to be used to do a database lookup but I've really no idea.

Failing that... any radical ideas on a completely other way to do it?

Cheers!

[tangoforce]

Yes you’ll need to use javascript, onblur and a ajax call to your main script which will then echo the information back to your javascript.

Pretty easy in theory but can take a while to iron out the bugs in the javascript… i have something similar myself - an inventory of all my junk (also using a barcode scanner - i have codes on all my boxes). One thing I noticed is that the scanner hits the enter key after scanning the code so you might find it submits your form instead of tabbing - be sure to handle that in your javascript

[tangoforce]

@maffp

Hi!

I’m creating a order sheet for my business

@chainey

If you have a requirement to handle browsers with javascript off you won’t be able to do it with javascript or ajax (which is just a technique in using js to access the server).

I suspect that the op is going to be using browsers that do have javascript enabled as he has already said about using onblur() and has made it clear that its his business and therefore his computers

[tangoforce]

Don’t take this the wrong way but the op has clearly stated ‘my’ business.

@maffp

Hi!
What I would like to do is scan a barcode using my barcode scanner whilst the cursor is in the ‘code’ input box. Then when I click tab

They clearly stated what they are doing, what he/she wants to achieve and how he/she wants it to work. If his business was a website development business I somehow doubt his/her customers would be scanning his/her finished webpages with the ops barcode scanner

@chainey

There also might be people with similar requirements reading this thread from the US where in some cases they are required by law to provide functionality for browsers with javascript off.

I’ve never known Yahoo mail to work with javascript turned off either Your post to be honest does kinda seem a bit irrelevant as the op has made it clear they’re willing to use javascript, it’s their business and they will be using it

[tangoforce]

@chainey

The info, if not relevant to the OP could very well be relevant to other readers with similar requirements but for clients.

But thats no reason to hijack the thread with information which is of no use to the op in a thread in which they are clearly asking for help.

You don’t need to reiterate anything, the op has clearly stated that THEY will be using the system with their own hardware. I don’t see how you can still think this may be for a web design customer.

If you look at the title of the thread the op is clearly referring to the use of onblur and is seeking guidance to the idea of using this indicating that they are more than happy to use javascript. It isn’t very productive of you to then jump in and suggest that they should also prepare for not being able to use javascript on their own systems. Instead you’re just throwing more confusion into the mix and giving the op more to think about than they need

[cranial_bore]

maffp: Here’s a little prototype http://www.mikehealy.com.au/files/barcode/

It uses jQuery to listen to blur on the code fields, does an ajax lookup, writes the name to a paragraph tag, and then focuses on the QTY box.

Index page:

<div id="order">
	
	<div class='product'>
		<input type='text' name='code[]' class='code'>
		<p class='item'>scan barcode</p>
		<input type='text' name='qty[]' class='qty'>
	</div>

	<div class='product'>
		<input type='text' name='code[]' class='code'>
		<p class='item'>scan barcode</p>
		<input type='text' name='qty[]' class='qty'>
	</div>
	
	<div class='product'>
		<input type='text' name='code[]' class='code'>
		<p class='item'>scan barcode</p>
		<input type='text' name='qty[]' class='qty'>
	</div>
		
	<div class='product'>
		<input type='text' name='code[]' class='code'>
		<p class='item'>scan barcode</p>
		<input type='text' name='qty[]' class='qty'>
	</div>
</div>

The JS. This is prototype standard code – may need improving!

$('#order input.code').blur(function(ev) {
	
	var code_input = ev.target;
	
	//<p> to output product name to
	//qty <input> to focus on
	var qty		= $(code_input.parentNode).children('input.qty')[0];
	var product = $(code_input.parentNode).children('p')[0];
	
	//Barcode value scanned
	var code = code_input.value;
	if(!code) {
		return;
	}
	
	//Get product name from server
	//Change url to script that will respond from $_GET['barcode']
	var url = 'get-product.php';
	
	//Callback function -- update name <p>
	var callback = function(data, textStatus, xhr) {
		product.className = 'active';
		product.innerHTML = data;
		qty.focus();
	};
	
	$.get(url, {barcode:code}, callback);
	
	product.innerHTML = 'loading...';
});

And the PHP script that recieves the code and looks up product name.
Obviously yours will connect to a database not just repeat the input back out

<?php
if(!isset($_GET['barcode'])) {
	exit('unknown');
}


$response = 'Product: ' . strtoupper(trim($_GET['barcode']));
exit($response);

Notes:

• I didn’t write to an input because it’s a bit of a contradiction in terms. You don’t want to input the name, it’s purely a result of the code. You could get fancy and use the new HTML5 <output> element
• I haven’t handled timeout/failure of the Ajax call

Regarding the JS issue others are discussing — the name to me is an optional enhancement. You could get by with the code only for non-JS users, or simply POST the form, lookup all the codes and display a confirmation list that shows all the names/codes before the order is placed. I don’t think you need to try and replicate the confirmation after each entry for non JS users.

[tangoforce]

Off Topic:

For the record, I didn’t hijack anything. You came in talking about non javascript usage in a thread asking specifically about javascript

It doesn’t matter who your reply was directed at (though you never indicated it was directed at any particular person) this is an open forum and thus anyone can read and comment on anything said by another member.

Good night.