


<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Walnutz &#187; Programming</title>
	<atom:link href="http://blog.walnutz.net/category/programming/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.walnutz.net</link>
	<description>Walnutz</description>
	<lastBuildDate>Wed, 10 Feb 2010 17:50:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Avoid Barcode Reader automatically submitted the form with Javascript</title>
		<link>http://blog.walnutz.net/avoid-barcode-reader-automatically-submitted-the-form-with-javascript.html</link>
		<comments>http://blog.walnutz.net/avoid-barcode-reader-automatically-submitted-the-form-with-javascript.html#comments</comments>
		<pubDate>Tue, 14 Jul 2009 06:40:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[barcode]]></category>
		<category><![CDATA[barcode reader]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[motorola]]></category>

		<guid isPermaLink="false">http://blog.walnutz.net/?p=45</guid>
		<description><![CDATA[Barcode reader used to read the barcode and then convert it to text, so you don&#8217;t need to enter the text manually. Barcode Reader not also enter the text to the textfield but ist also automatically send &#8220;Enter&#8221; key like we press &#8220;Enter&#8221; on the keyboard. This can be good condition or bad condition, because [...]]]></description>
			<content:encoded><![CDATA[<p>Barcode reader used to read the barcode and then convert it to text, so you don&#8217;t need to enter the text manually. Barcode Reader not also enter the text to the textfield but ist also automatically send &#8220;Enter&#8221; key like we press &#8220;Enter&#8221; 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.</p>
<p>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 <span id="more-45"></span>retrieving the text from barcode and still in return to form.</p>
<p>This the Javascript function to stop the form after reading from Barcode Reader</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span> stopform<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// Retrieve the code</span>
	<span style="color: #003366; font-weight: bold;">var</span> code <span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// Return false to prevent the form to submit</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>and then you must add onsubmit parameter in the form element like this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">method</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;post&quot;</span> <span style="color: #000066;">onsubmit</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;return stopform()&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text1&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span>  <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span></pre></td></tr></table></div>

<p>The code above will still unable to press Submit button, because onsubmit parameter on the form always return to false.</p>
<p>Another version to prevent auto submit from Barcode Reader is convert the &#8220;ENTER&#8221; character into &#8220;TAB&#8221; character, so you don&#8217;t need to block ENTER command from Barcode Reader but it wil converted into TAB command.</p>
<p>This the Javascript code to convert ENTER character into TAB character</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span> getIndex<span style="color: #009900;">&#40;</span>input<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> index <span style="color: #339933;">=</span> <span style="color: #339933;">-</span>1<span style="color: #339933;">,</span> i <span style="color: #339933;">=</span> 0<span style="color: #339933;">,</span> found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">&lt;</span> input.<span style="color: #660066;">form</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&amp;&amp;</span> index <span style="color: #339933;">==</span> <span style="color: #339933;">-</span>1<span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">form</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> input<span style="color: #009900;">&#41;</span>index <span style="color: #339933;">=</span> i<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">else</span> i<span style="color: #339933;">++;</span>
	<span style="color: #000066; font-weight: bold;">return</span> index<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>  
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> SendTab<span style="color: #009900;">&#40;</span>objForm<span style="color: #339933;">,</span> strField<span style="color: #339933;">,</span> evtKeyPress<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
	<span style="color: #003366; font-weight: bold;">var</span> aKey <span style="color: #339933;">=</span> evtKeyPress.<span style="color: #660066;">keyCode</span> <span style="color: #339933;">?</span>
	evtKeyPress.<span style="color: #660066;">keyCode</span> <span style="color: #339933;">:</span>evtKeyPress.<span style="color: #660066;">which</span> <span style="color: #339933;">?</span>
	evtKeyPress.<span style="color: #660066;">which</span> <span style="color: #339933;">:</span> evtKeyPress.<span style="color: #660066;">charCode</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>aKey <span style="color: #339933;">==</span> 13<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		objForm<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#40;</span>getIndex<span style="color: #009900;">&#40;</span>objForm<span style="color: #009900;">&#91;</span>strField<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span>1<span style="color: #009900;">&#41;</span> <span style="color: #339933;">%</span> objForm.<span style="color: #660066;">length</span><span style="color: #009900;">&#93;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Then you can put the code in the textfield like this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;f&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;textfield1&quot;</span> <span style="color: #000066;">onkeypress</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;return SendTab(document.forms['f'], 'textfield1', event);&quot;</span>  <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span></pre></td></tr></table></div>

<p>This code should work fine in any browser.</p>
<p>Barcode reader sample i&#8217;m used is Motorola SK1-LS1203(A)</p>
<p>Source: </p>
<p>http://reazulk.wordpress.com</p>
<p>http://yacoding.blogspot.com</p>
<script type="text/javascript">
  addthis_url    = 'http%3A%2F%2Fblog.walnutz.net%2Favoid-barcode-reader-automatically-submitted-the-form-with-javascript.html';
  addthis_title  = 'Avoid+Barcode+Reader+automatically+submitted+the+form+with+Javascript';
  addthis_pub    = '';
</script><script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script>
]]></content:encoded>
			<wfw:commentRss>http://blog.walnutz.net/avoid-barcode-reader-automatically-submitted-the-form-with-javascript.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
