Jul 142009
 

Barcode reader used to read the barcode and then convert it to text, so you don’t need to enter the text manually. Barcode Reader not also enter the text to the textfield but ist also automatically send “Enter” key like we press “Enter” on the keyboard. This can be good condition or bad condition, because when we only need to enter the text from the barcode without submitted the form this can be a risk problem.

This problem can be solved easily with Javascript with onsubmit parameter to controll submit button and avoid submitted automatically by Barcode Reader. With this javascript, form will not submitted after retrieving the text from barcode and still in return to form.

This the Javascript function to stop the form after reading from Barcode Reader

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function stopform(){
	// Retrieve the code
	var code =document.getElementById ('text1').value;
 
	// Return false to prevent the form to submit
	return false;
}
</script>

and then you must add onsubmit parameter in the form element like this

1
2
3
<form action="" method="post" onsubmit="return stopform()">
<input id="text1" type="text"  value="" />
</form>

The code above will still unable to press Submit button, because onsubmit parameter on the form always return to false.

Another version to prevent auto submit from Barcode Reader is convert the “ENTER” character into “TAB” character, so you don’t need to block ENTER command from Barcode Reader but it wil converted into TAB command.

This the Javascript code to convert ENTER character into TAB character

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function getIndex(input){
	var index = -1, i = 0, found = false;
	while (i < input.form.length && index == -1)
		if (input.form[i] == input)index = i;
		else i++;
	return index;
}  
 
function SendTab(objForm, strField, evtKeyPress){  
	var aKey = evtKeyPress.keyCode ?
	evtKeyPress.keyCode :evtKeyPress.which ?
	evtKeyPress.which : evtKeyPress.charCode;
 
	if (aKey == 13){
		objForm[(getIndex(objForm[strField])+1) % objForm.length].focus();
	}
}
</script>

Then you can put the code in the textfield like this

1
2
3
<form action="" name="f">
<input name="textfield1" onkeypress="return SendTab(document.forms['f'], 'textfield1', event);"  type="text">
</form>

This code should work fine in any browser.

Barcode reader sample i’m used is Motorola SK1-LS1203(A)

Source:

http://reazulk.wordpress.com

http://yacoding.blogspot.com

  3 Responses to “Avoid Barcode Reader automatically submitted the form with Javascript”

  1. Thanks for the code.

  2. Hi,

    I am trying to use this code but when i scan a bacrcode my barcode reader submit the form and send to next page.

    I m using My-Link USB Laser (Bi-directional) Barcode Scanner.

    Please can you help.

  3. I found this answer which should fix my issue also – can anyone please help me by advising where to add this code to? That is, how can i edit the script of my scanner? Many thanks!

Leave a Reply to Karl Cancel reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

To use reCAPTCHA you must get an API key from https://www.google.com/recaptcha/admin/create