Javascript form auto tab after input with barcode scanner

Hi experts!

I have a form page that I would like to auto tab to the next field after the user enters input with a barcode scanner. My barcode scanner is not sending a carriage return after input. It just scans the code exactly as it's on the barcode.

From my searching I've found many solutions that will move to the next field but they all rely on input that is a fixed length like a 3 digit area code or a 5 digit zip code. The javascript checks the value and if it's the max length then it moves to the next field.

The input my users are submitting is not fixed in size. It's being scanned off of a barcode. What I want it to do is after the barcode has been scanned into the field move to the next field. Is this possible to do?
steveo442Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

R-ByterCommented:
Use the onchange event on that field?

Regards
steveo442Author Commented:
With the onchange added it won't drop to the next field unless I click the mouse. The cursor just sits blinking after the text from scanning the barcode.
<table>
<td>
<form action="Add.php" method="post" name="Add">
</td>
<tr>
<td>Name:<td><input type="text" name="Name" size="25" maxlength="25" onchange="this.form.OrderNumber.focus();">
</td>
<tr>
<td>Order Number:<td><input type="text" name="OrderNumber" size="7" maxlength="7" onchange="this.form.Part.focus();">
</td>
<tr>
<td>
Part:<td><input type="text" name="Part" size="30" maxlength="30">
</td>
<tr>
<td>
<input type="submit" name="submit" value="Bin To Tech">
</form>
</center>
</td>
</table>

Open in new window

leakim971MultitechnicianCommented:
Use a timer to check number of char in the field

http://www.w3schools.com/jsref/met_win_setinterval.asp
// if the number of characters is greater or equal to 10 we go on the next field. 
setInterval("if(document.getElementById('myBarCodeFieldID').value.length>=10) document.getElementById('nextFieldID').focus()", 250);

Open in new window

OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

R-ByterCommented:
Would You consider using jQuery framework?

Regards
steveo442Author Commented:
@leakim971 I'd rather not have it check for the amount of characters since it will be different depending on people's first & last names as well as not knowing how long the part number will be.

@R-Byter I would consider using jQuery if that would work.
leakim971MultitechnicianCommented:
If the scanner do not send CR code, it send TAB or any char ? Else how do you want the program know we need to go on the next field ?
Instead checking ONLY the field length we may additionaly check first and last name to know which lenth we're looking for.
steveo442Author Commented:
@leakim971: The scanner does not send any code after it scans. It just scans the barcode into the field.

The onchange="this.form.OrderNumber.focus();"  almost works, it's just that it sits there after scanning the barcode with the blinking cursor. If I click the mouse button while it's after the scanned in text it then jumps to the next field.


leakim971MultitechnicianCommented:
Try :

onchange="setTimeOut('this.form.OrderNumber.focus();',250)"
R-ByterCommented:
Download jQuery from www.jquery.com and reference it inn Your code like this:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Then, change Your html code of the input field (add id to it):

<input type="text" id="Part" name="Part" size="30" maxlength="30">
<input type="text" id="OrderNumber" name="OrderNumber" size="7" maxlength="7">

After that, add this between Your head tags:

<script type="text/javascript">
$(function() {
          $("#Part").live('paste', function(event) {
                    $("#OrderNumber").focus();
          });
});
</script>

Try this and see if it works. Since I cant reproduce exact same conditions as You have, I could only test it with pasting some numbers myself and immediately after that that the OrderNumber field was focused.

http://www.bosko.rs/ee/focuschange/

Regards

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
steveo442Author Commented:
@R-Byter:

That's close but I still need to click with the mouse before it jumps down to the next field. It looks like I'm going to have to reprogram the barcode scanner to send a carriage return in order to do this.
R-ByterCommented:
Im sorry I wasnt able to help You more, but its hard without the actual situation with the scanner.

Regards
leakim971MultitechnicianCommented:
Did you try the two proposition with the timers ?

setInterval("if(document.getElementById('myBarCodeFieldID').value.length>=10) document.getElementById('nextFieldID').focus()", 250);

or

onchange="setTimeOut('this.form.OrderNumber.focus();',250)"

try this too : http://www.w3schools.com/jsref/met_text_select.asp

this.form.OrderNumber.select()
onchange="this.form.OrderNumber.focus();this.form.OrderNumber.select()"

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.