Using barcode input data to textbox and move to second textbox the focus

Hi…

I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data’s on the database.

How is it possible?

here is my sample code:


<?php
    error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}
mysql_select_db("mes", $con);
?>

<html>
<head>
<script type="text/javascript">
function ini()
{

// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;

}

</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">

<form name=barcode onsubmit = "return ini()">

<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>

</body>
</html>

All barcode scanners have options for what key should be sent once the barcode is scanned. Usually it’s TAB or ENTER. If you set up your form with the proper tab order (it should work as-is, but setting an explicit tabindex is good) and you set the scanner to submit TAB after a scan, then you are mostly there. Then on the last input you could use the “onblur” event to call your ini() function:


<body onload="document.getElementById("barcode.code_read_box1").focus();">

  <form name=barcode>

    <input type="text" tabindex="0" id="code_read_box1" value="" /><br/>
    <input type="text" tabindex="1" id="code_read_box2" value="" /><br/>
    <input type="text" tabindex="2" id="code_read_box3" value="" /><br/>
    <input type="text" tabindex="3" id="code_read_box4" value="" /><br/>
    <input type="text" tabindex="4" id="code_read_box5" value="" /><br/>
    <input type="text" tabindex="5" id="code_read_box6" value="" onblur="ini();" />
  </form>

</body>

I’m not sure exactly what you are doing with your ini() function, but hopefully that helps a bit.

Thank you…

I resolved it now using this code but I got problem in ajax when I press enter on the last textbox to save the data:

I got an error:

‘ajaxRequest’ is null or not an object.


<?php
    error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone  
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}
mysql_select_db("mes", $con);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<script type="text/javascript" >  

var input_size = 1;

function checkTextBox(bc){
   var barcode_ =  bc.tabIndex;
   
   if ( bc.value.length > input_size ) 
        { 
            for(i=0; i<document.barcode.elements.length; i++) 
            { 
                      if( document.barcode.elements[i].tabIndex == (barcode_+1) ) 
                     {    
                         document.barcode.elements[i].focus(); 
                         break; 
                     } 
          } 
    }         
} 

function postSet() {
    if (window.event.keyCode==13 || window.event.keyCode==10) {
        document.getElementById('code_read_box6').disabled = true;
        save();
        alert('code_read_box6');
    }
}
 
</script> 

<script type="text/javascript"> 
var ajaxTimeOut = null;
var ajaxTimeOutOperator = null; 
var responsePHP; // = "no_reply"
var responsePHPOperator;
var changeFocus; //= false;
var transactionWasSaved;

function remoteRequestObject() {
    var ajaxRequest = false;
    try {
        ajaxRequest = new XMLHttpRequest();
    }
    catch(err) {
        try{
            ajaxRequest = new ActiveXObject("MSxml2.XMLHTTP");
        }
        catch(err) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(err){
                // --> change to DOM alert("Not Supported Browser") + err.description;
                notify('Not Supported Browser.');
                return false;
            }
        }
    }
    return ajaxRequest;
} 

var ajaxRequest; // = remoteRequestObject();
var ajaxRequestOperator;
</script>

<script type="text/javascript">
function save() {            
    ajaxRequest.onreadystatechange = function () {
    if (ajaxRequest.readyState==4 && ajaxRequest.status==200) {
       var result = ajaxRequest.responseText;
       
        alert (result);
           
           if (result == "failed") {
            document.getElementById('code_read_box6').disabled = false;
            document.getElementById('code_read_box6').value = "";
            document.getElementById('code_read_box6').focus();
            notify("Please scan again.");
           }
           
           if (result == "saved") {
              alert(result);
              notify("Transaction has been saved.");
              reset();
           }   
           
       }     
    }      
   
    
 var url = "save_barcode.php";   

ajaxRequest.open("POST", url, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.setRequestHeader("Content-length", parameters.length);
ajaxRequest.setRequestHeader("Connection", "close");
ajaxRequest.send(parameters);
}
 
</script> 
 
</head> 
<body onLoad="document.barcode.code_read_box1.focus();"> 
<form name="barcode" > 
<input type="text" tabindex="1" id="code_read_box1" value="" onkeyup="checkTextBox(this);"/><br/> 
<input type="text" tabindex="2" id="code_read_box2" value="" onkeyup="checkTextBox(this);"/><br/> 
<input type="text" tabindex="3" id="code_read_box3" value="" onkeyup="checkTextBox(this);"/><br/> 
<input type="text" tabindex="4" id="code_read_box4" value="" onkeyup="checkTextBox(this);"/><br/> 
<input type="text" tabindex="5" id="code_read_box5" value="" onkeyup="checkTextBox(this);"/><br/> 
<input type="text" tabindex="6" id="code_read_box6" value="" onkeyup="checkTextBox(this);" onkeypress="postSet()"/><br/> 
</form> 
</body> 
 
</html> 


Thank you so much

It seems that this barcode reader may help you in this issue!