I am using a barcode scanner to enter data into input fields on a webpage. I set up the form and autofocus on the first input field. When the first barcode is entered into the first input field I would like focus to jump to the next input field. However, as soon as I enter the first barcode the form 'submits'. Here is the html I am using:
<form id="barcode1" name="barcode" method="Post" action="#">
<div>
<label for="S1">Barcode 1 </label>
<input id="S1" class="bcode" type="text" name="S1" autofocus/>
<label for="S2">Barcode 2 </label>
<input id="S2" class="bcode" type="text" name="S2" />
<label for="S3">Barcode 3 </label>
<input id="S3" class="bcode" type="text" name="S3" />
</div>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
I have tried solutions from similar SO questions here and [here] (http://jsfiddle.net/davidThomas/ZmAEG/), but they don't seem to work.
Ideally I would like to have a solution something like this (the second link above), so please let me know where or why this is not working and what I can do to fix it.
$('form').on('keypress','input',function(e){
var eClassName = this.className,
index = $(this).index('.' + eClassName) + 1;
if (e.which === 13){
e.preventDefault();
$('input.' + eClassName)
.eq(index)
.focus();
}
});
You need to return false in order to prevent the enter key from submitting the form.
The answer to this question will help you: Prevent form submission with enter key
//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
if ( e.which == 13 ) // Enter key = keycode 13
{
$(this).next().focus(); //Use whatever selector necessary to focus the 'next' input
return false;
}
});
No need to make any changes to your bar scanner.