Barcode reader tab then enter - javascript

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>

Related

search when press enter not when typing with livesearch.js

I tried to search when press enter, here I use livesearch.js for searching but this js always search when typing. I want it search when press enter. So iI tried change but still not working.
Framework js
<script type="text/javascript" src="framework/liveSearch/livesearch.js"></script>
HTML
<input type="text" id="livesearch" class="livesearch" style="margin-top:0;"/>
<div class="searchresult" id="liveRequestResults"></div>
<iframe id="mainResult" src='log-list.php'></iframe>
Javascript
<script>
$('#livesearch').keydown(function(e) {
if(e.keyCode == 13) // I tried this code, first enter worked, after that back to search when typing
{
liveReqInit('livesearch','liveRequestResults','log-ls.php','','mainResult'); //this search work when typing
}
})
</script>
From what I understood, you want a normal search box. This is going go submit the value to your backend(which I assume is log-ls.php).
<form action="log-ls.php">
<input type="search" placeholder="Search..." name="search">
<button type="submit" value="Submit">Submit</button>
</form>

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

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();
});

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

How can I check if a submit button is clicked and not an enter press on a page?

Imagine this piece of html:
​<form>
<input type="text">
<input type="submit" id="a">
</form>​​​​​​
and this piece of Javascript
document.getElementById('a').onclick = function (e) {
alert(e.type);
};​​​​
The alert will always say 'click', even if you press enter in the textfield.
How can I check if the button is really clicked?
Imagine this piece of html:
<form>
<input type="text">
<input type="button" id="a">
</form>
and this piece of Javascript
document.getElementById('a').onclick = function (e) {
this.form.submit();
};​​​​
No confusion will be possible.
There is almost no reason to use input type="submit" in modern web applications.

Categories

Resources