Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts

    Need help in moving focus to the next textfield

    Hi..


    I need help in moving focus to the next textfield after I input data to the first textfield.
    Now in my code when I have data to stock_item textfield it did not move the cursor or focus on the next textfield which is lot_no.

    here is my 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>
    <title>Picking</title>
    <head>
    <link href="kanban.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    function StockItemFocus() {
        if (!document.getElementById('stock_item').disabled) {
            if (document.activeElement.name='stock_item') {
                document.getElementById('stock_item').focus();    
            }
        }    
         
    }
    </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 ajaxRequest = remoteRequestObject();   
    var ajaxRequestOperator;
    </script>
    <script type="text/javascript">
    function lotIdCheck(element) {
        //var lotCodeStr;
        var suffix;
        if (window.event.keyCode==13 || window.event.keyCode==10) {
            
            var txtElementID = element;
            if (txtElementID.value == "") { return false; }
        
        capture(txtElementID); 
                
        } 
        }    
    
    
     function sequence() {       
               document.getElementById('stock_item').focus();
               document.getElementById('lot_no').disabled = true;        
               document.getElementById('sr_no').disabled = true;
               document.getElementById('bin_loc').disabled = true;
               document.getElementById('picked_by').disabled = true;
               
               var txt = document.getElementById('lot_no');
               if (txt.attachEvent) {
                   txt.attachEvent ("onkeypress", function () {lotIdCheck(txt)});
               }  
               
               document.getElementById('stock_item').focus(); 
               
               document.attachEvent('onmousewheel', function(e){
                if (!e) var e = window.event;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
                }, false);
    }
    </script>  
    
    
    </head>
    <body onload="sequence();" oncontextmenu="return false;" onselectstart="return false;" onmousemove="StockItemFocus();" onclick="StockItemFocus();">
    <div class='stock_item_label'>
    <label> Stock Item : </label>
    </div>
    <div class='stock_item_field'>
    <input type='text' name='stock_item' id='stock_item' value='' size='30'> 
    </div>
    
    <div class='lot_label'>
    <label> Lot # : </label>
    </div>
    <div class='lot_field'>
    <input type='text' name='lot_no' id='lot_no' value='' size='30' >
    </div>
    
    <div class='sr_label'>
    <label> SR # :  </label>
    </div>
    <div class='sr_field'>
    <input type='text' name='sr_no' id='sr_no' value='' size='30'>
    </div>
    
    <div class='bin_label'>
    <label> Bin Loc : </label>
    </div>
    <div class='bin_field'>
    <input type='text' name='bin_loc' id='bin_loc' value='' size='30' > 
    </div>
    
    <div class='pick_label'>
    <label> Picked By :</label>
    </div>
    <div class='pick_field'>
    <input type='text' name='picked_by' id='picked_by' value='' size='30'>
    </div>
    </form>
    </body>
    </html>
    Thank you

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    713
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by iBall View Post
    There's lots of ways you can do this. One way is to give each textfield an index value. The attach an onblur event handler to each textfield. The evnt handler sends the index of the textfield to a function that then sets focus, using focus(), to the element with an id at the next index in an array of id's for the textfields.
    can you give the code?

    but I have this my revise code:

    Code:
    <html>
    <title>Picking</title>
    <head>
    <link href="kanban.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    function StockItemFocus() {
        if (!document.getElementById('stock_item').disabled) {
            if (document.activeElement.name='stock_item') {
                document.getElementById('stock_item').focus();  
            }
        }  
        
    }
    </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 ajaxRequest = remoteRequestObject();  
    var ajaxRequestOperator;
    </script>
    <script type="text/javascript">
    function lotIdCheck(element) {
        //var lotCodeStr;
        var suffix;
        if (window.event.keyCode==13 || window.event.keyCode==10) {
          
            var txtElementID = element;
            if (txtElementID.value == "") { return false; }
      
      //  capture(txtElementID);
              
        }
        }  
    
    function sequence() {      
               document.getElementById('stock_item').focus();
               document.getElementById('lot_no').disabled = true;      
               document.getElementById('sr_no').disabled = true;
               document.getElementById('bin_loc').disabled = true;
               document.getElementById('picked_by').disabled = true;
              
               var txt = document.getElementById('lot_no');
               if (txt.attachEvent) {
                   txt.attachEvent ("onkeypress", function () {lotIdCheck(txt)});
               }
              
               document.getElementById('stock_item').focus();
              
               document.attachEvent('onmousewheel', function(e){
                if (!e) var e = window.event;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
                }, false);
    }
        
    //-- Enable Next Input --//
    function enable_next_input(){
        if(document.getElementById('stock_item') == document.activeElement) {
            document.getElementById('stock_item').disabled = true; //Disable stock_item
            document.getElementById('lot_no').disabled = false; //Enable stock_item
            document.getElementById('lot_no').focus(); //Set focus to stock_item
        }
        if(document.getElementById('lot_no') == document.activeElement) {
            document.getElementById('lot_no').disabled = true; //Disable stock_item
            document.getElementById('sr_no').disabled = false; //Enable stock_item
            document.getElementById('sr_no').focus(); //Set focus to stock_item
        }
    }
    </script>
    
    </head>
    <body onload="sequence();" oncontextmenu="return false;" onselectstart="return false;" onmousemove="StockItemFocus();" onclick="StockItemFocus();" onkeypress="enable_next_input();">
    <div class='stock_item_label'>
    <label> Stock Item : </label>
    </div>
    <div class='stock_item_field'>
    <input type='text' name='stock_item' id='stock_item' value='' size='30'>
    </div>
    <div class='lot_label'>
    <label> Lot # : </label>
    </div>
    <div class='lot_field'>
    <input type='text' name='lot_no' id='lot_no' value='' size='30' >
    </div>
    <div class='sr_label'>
    <label> SR # :  </label>
    </div>
    <div class='sr_field'>
    <input type='text' name='sr_no' id='sr_no' value='' size='30'>
    </div>
    <div class='bin_label'>
    <label> Bin Loc : </label>
    </div>
    <div class='bin_field'>
    <input type='text' name='bin_loc' id='bin_loc' value='' size='30' >
    </div>
    <div class='pick_label'>
    <label> Picked By :</label>
    </div>
    <div class='pick_field'>
    <input type='text' name='picked_by' id='picked_by' value='' size='30'>
    </div>
    </form>
    </body>
    </html>
    my problem in my revise code is when I paste data to stock item then I press enter key the focus goes to sr_no , it should be focus on lot_no and if the lot_no as data and press enter key then the focus move to sr_no

    Thank you


  •  

    Posting Permissions

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