asked on

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?

R-Byter

Use the onchange event on that field?

Regards

steveo442

ASKER

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

leakim971

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

R-Byter

Would You consider using jQuery framework?

Regards

steveo442

ASKER

@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.

leakim971

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.

steveo442

ASKER

@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.

leakim971

Try :

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

ASKER CERTIFIED SOLUTION

R-Byter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

steveo442

ASKER

@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-Byter

Im sorry I wasnt able to help You more, but its hard without the actual situation with the scanner.

Regards

leakim971

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