Changing focus from one input to the next with a barcode scanner - javascript

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.

If your barcode scanner is a keyboard wedge, you should be able to configure the trailing character to a TAB.
It seems like, by default, your scanner is trailing with an ENTER (carriage return).
Another option would be to also check for a LF (decimal 10) in your javascript code.

Looks like your function will never get called because browser submits the form on Enter. You may have to suppress submit until all fields are filled (or some other condition) by intercepting submit event first.
$( "form" ).submit(function( event ) {
if(/*all req. fields are filled -> submit the form*/)
$(this).submit();
event.preventDefault();
});

Related

Mute HTML validation message while typing

Steps to reproduce the issue:
Set an input of type email / phone
Set the input as required
Hit form submit on the wrong pattern for email
The HTML validation message should be now visible.
Keep entering text into the input box
On entering the text in the input box after the validation message has been kicked in, the validation message persists and gets displayed on every keystroke.
I even tried setting setCustomValidity("") on keyup event but that does not help either.
Here is an example fiddle.
Here is a gif of the problem:
You can see that until I add #gmail.com to the email input, it keeps showing the HTML validation.
Any help would be appreciated.
Source code for the same.
HTML
<form>
<p>
<label for="t2">What's your e-mail?</label>
<input id="email" type="email" id="t2" name="email" required>
</p>
<p>
<button>Submit</button>
</p>
</form>
JS
$("#email").on("keyup", function (e) {
if (e.target.value.lenth !== 0) {
e.target.setCustomValidity("");
}
});
When the user presses enter and the input validation fails, that input fires an invalid event. So, you can add an invalid handler to customize (and possibly prevent) the resulting behavior. The invalid event does not get triggered by further inputs of normal characters, but the invalid pop-up will keep appearing as long as the input remains invalid and focused. When the input is unfocused (blurred), the validation pop-up will disappear. It will re-appear only after the user re-focuses the input and presses enter when the input text is still invalid.
So, one possible solution is to add an invalid listener that keeps track of whether the error pop-up is showing or not. Then, add a keydown listener that checks if the pop-up is showing. If the pop-up is showing, blur and then focus the element, so as to make the pop-up disappear until the next time the user presses enter:
let errorShowing = false;
$("#email")
.on('invalid', (e) => {
errorShowing = true;
})
.on("keydown", function(e) {
if (!errorShowing) return;
setTimeout(() => {
this.blur();
this.focus();
});
errorShowing = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<label for="t2">What's your e-mail?</label>
<input id="email" type="email" id="t2" name="email" required>
</form>

onclick event submits when button clicked but not when enter is pressed on keyboard?

I'm only using HTML and JavaScript.
I have one form
<form id="form1">
<input name="name" type="text" size="20">
</form>
And one button
<button onclick="outputname()" type="submit">Search</button>
So the idea is the user types a number on the form and clicks the search button and an action is performed (this works great).
However, if the user enters a number and hits the Enter button on keyboard the page is refreshed. The same happens on iPad. ("Return" button is displayed instead of "Go").
So I want the Enter button to work on keyboard and Go to work on iOS.
The idea is that the user enters a customer number and the relevant details are displayed.
Give an ID to both your input field and button, to be sure you trap the correct one:
HTML:
<form action="destination.html" method="post">
<input id="foo" name="name" type="text" size="20">
<button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>
Note that destination.html is where you want the data posted to. If you want it posted to the same file, just use: action="" or leave it out.
Javascript:
document.getElementById('foo').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
var btn = document.getElementById('mybutt');
mybutt.click();
return false;
}
}
Sources:
How to detect when the user presses Enter in an input field
Capturing the Enter key to cause a button click with javascript
Insert this:
action="post"
Inside your form tag. I.e., your form tag will have to be this way
<form id="form1" action="post">
In this case, you could manage the submit event, instead of key/click events.
<form id="form1" onsubmit="outputname()">
Submission events triggered by either a click or pressing enter will call outputname.

Avoid auto submit form after scanning thru barcode scanner

HTML
<form action="die_issue_process.php" id="form" method="post" autocomplete="off">
<input type="text" name="item_name[]" />
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="submit" id="Search" name="Search" value="Search" />
Javascript code:
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
Friends in this form I have single text box and add button to add text box according to the need. Here in this form I'm giving input thru a BAR CODE reader so once the bar-code is scanned the form gets automatically submitted but my requirement is it should be submitted only after giving the submit button
Note: my form gets auto submitted on first scan of input box itself.
Well, a barcode scanner, reads the barcode and submits automatically!
So I think you better change your input with the type "submit" to a button
<input type="button" id="Search" name="Search" value="Search" />
You can consider a barcode scanner as a very specialised keyboard. If you test your barcode scanner whilst in a text editor. You will see they just very quickly enter the string that the barcode represents, followed by a carriage return.
These are indistinguishable from the keystrokes required to manually perform the same operation, using the keyboard.
If you are focused on a text field in a form, pressing enter will often submit the form.
To prevent the enter key from submitting a form on a text field, you can kill that keystroke with an event handler, for example:
(function() {
var textField = document.getElementById('textFieldId');
if(textField) {
textField.addEventListener('keydown', function(mozEvent) {
var event = window.event || mozEvent;
if(event.keyCode === 13) {
event.preventDefault();
}
});
}
})();
If the scanner is feeding to a textbox, start your form with your submit button hidden. Only visiable it once the textbox has data input. this can be done by javascript..

Submit not triggered on enter the text box after filling the value. in IE

I have a form, In this form there is only one text field. after the field is filled user pressing enter key. but the form is not submit in ie8 how to fix this.
But it works fine with chrome and firefox.
example code :
<form>
<label><input type="text" /></label>
<input value="Enter after adding value" type="submit">
</form>
how to make ie to work on enter key pressed.
thanks in advance!
Some browsers by default allow the enter key to submit a form, others do not.
You can work around this by adding an event handler that will submit the form on enter key. Try something like
$("input").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$("form").submit();
}
});
If you have multiple forms on the page, then ensure you add an id attribute and update the above code accordingly.
There you go
<form id="myForm">
<label><input type="text" /></label>
<input value="Enter after adding value" type="submit" id="name">
</form>
<script type="text/javascript">
$(document).ready(function()
{
$("#name").keypress(function(e)
{
if(e.which==13){
document.getElementById("myForm").submit();
}
});
});
I hope that I could help

Barcode reader tab then enter

I am trying to work out a way of making A return function as a tab or vice versa. When the user scans the barcode it moves to the next text field then on the last field it submits the form. Really of sure of this and jquery/ JavaScript to make it happen!
The default behavior of barcode scanners is to input the characters followed by "enter." If you meant you want the scanner to move to the next field instead, you can block the enter with something like:
<form method="post">
<input type="text" name="barcode" id="b1" />
<input type="text" name="otherfield" id="b2" />
<input type="submit" id="submit" />
</form>
<script type="text/javascript">
$('#b1').keydown(function(e){
if (e.keyCode == 13) { // barcode scanned!
$('#b2').focus();
return false; // block form from being submitted yet
}
});
</script>

Categories

Resources