SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by raw10 View Post
    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:

    Code:
    <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.


    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);
    ?>
    
    <!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

  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems that this barcode reader may help you in this issue!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •