SitePoint Sponsor

User Tag List

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

    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. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Demo: http://jsfiddle.net/OMGCarlos/dMvGn/

    You're off to a good start, but you aren't binding the keypress event anywhere!
    Code:
    //-- Enable Next Input --//
    function enable_next_input(){
        if(document.getElementById('stock_item') == document.activeElement) {
            document.getElementById('lot_no').disabled = false;
            document.getElementById('lot_no').focus();
        }
    }
    Add onkeypress="enable_next_input();" to the body tag.

    You can expand that by adding:
    if(document.getElementById('lot_no') == document.activeElement)
    {...}

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    Demo: http://jsfiddle.net/OMGCarlos/dMvGn/

    You're off to a good start, but you aren't binding the keypress event anywhere!
    Code:
    //-- Enable Next Input --//
    function enable_next_input(){
        if(document.getElementById('stock_item') == document.activeElement) {
            document.getElementById('lot_no').disabled = false;
            document.getElementById('lot_no').focus();
        }
    }
    Add onkeypress="enable_next_input();" to the body tag.

    You can expand that by adding:
    if(document.getElementById('lot_no') == document.activeElement)
    {...}
    Hi..

    I tried your demo and I notice that when I paste data to stock item then I press the enter key the cursor move to lot_no but in a seconds it moves again the cursor to the stock item fields.

    Thank you

  4. #4
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried your 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('lot_no').disabled = false;
        document.getElementById('lot_no').focus();
        }
    }
    </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>
    now how does the focus goes to sr_no after I input to lot_no and I want to happen is after I paste data to stock_item the focus move to lot_no and the stock item field will be disable.and after i paste data to lot_no fields the focus moves to sr_no then lot_no will be disabled also.

    Thank you

  5. #5
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not really sure why the focus is going back to the first input, there must be some other function being called. As for your second question you can do something like this:

    Code:
    //-- 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
        }
    }
    etc

  6. #6
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    I'm not really sure why the focus is going back to the first input, there must be some other function being called. As for your second question you can do something like this:

    Code:
    //-- 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
        }
    }
    etc
    I tried this:

    after I paste data to stock_item and press the enter key, the stock item was disabled but instead the focus foes to lot_no it was in sr_no

    Thank you

  7. #7
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oops, just move the bottom if statement to the top. By the time it gets to the second if statement, the focus has shifted to lot_no, so it will automatically focus sr_no as well.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help..

    I highly appreciated ...

    While waiting for your reply, I tried to debug it, to find the bugs.


    Thank you

  9. #9
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    Oops, just move the bottom if statement to the top. By the time it gets to the second if statement, the focus has shifted to lot_no, so it will automatically focus sr_no as well.
    Top of what?

    Thank you

  10. #10
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    You mean this?

    Code:
    function enable_next_input(){
        if(document.getElementById('stock_item') == document.activeElement) {
      if(document.getElementById('lot_no') == 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
        
      
            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
        
    }
    }
    }
    Thank you

  11. #11
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this:

    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('lot_no') == 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
            
            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
        }
        /* 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
        } *. 
        
        /* if(document.getElementById('sr_no') == document.activeElement) {
            document.getElementById('sr_no').disabled = true; //Disable stock_item
            document.getElementById('bin_loc').disabled = false; //Enable stock_item
            document.getElementById('bin_loc').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>
    still after i press enter key on stock item the focus moves to sr_no

    Thank you

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Simplifying things to only the enter key moving to a the next field, here is how I would do it.
    This keeps the form as simple as practical so that it works without needing scripting, and making slight modifications to the form when scripting is available so that the Enter key moves to the next field, and it submits once the last field has been entered.

    This example submits to test.html, but you can have it submit of course to a php script which then redirects back to the page.
    Or, you can use ajax to submit and not have a page reload occur at all.

    Code html4strict:
    <html>
    <title>Picking</title>
    <head>
    </head>
    <body>
        <form id="picking" action="test.html">
        <p><label>Stock Item : <input name="stock_item"></p>
        <p><label>Lot # : <input type="text" name="lot_no"></p>
        <p><label>SR # : <input type="text" name="sr_no"></p>
        <p><label>Bin Loc : <input type="text" name="bin_loc"></p>
        <p><label>Picked By : <input type="text" name="picked_by"></p>
        <p><input type="submit"></p>
    </form>
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

    Code javascript:
    function enableNextInput(field) {
        var form = field.form,
            i,
            nextElement;
        for (i = 0; i < form.elements.length; i += 1) {
            if (form.elements[i] === field) {
                nextElement = form.elements[i + 1];
                if (nextElement.type !== 'submit') {
                    nextElement.focus();
                } else {
                    // If using ajax
                    // do ajax submission ...
                    // then clear existing fields, and focus the first field
                    // form.elements[0].focus();
     
                    // If not using ajax, submit by clicking the submit button
                    nextElement.click();
                }
            }
        }
        return false;
    }
    function pickingKeyHandler(evt) {
        evt = evt || event;
        var charCode = evt.charCode || evt.keyCode,
            targ = evt.target || evt.srcElement;
     
        // allow all keypresses to occur, except for the Enter key
        if (charCode !== 13) {
            return;
        }
     
        // When the Enter key has been pressed
        return enableNextInput(targ);
    }
    function init(form) {
        form.elements[0].focus();
        form.onkeypress = pickingKeyHandler;
        document.getElementsByName('submit')[0].parentNode.style.display = 'none';
    }
    var form = document.getElementById('picking');
    init(form);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Simplifying things to only the enter key moving to a the next field, here is how I would do it.
    This keeps the form as simple as practical so that it works without needing scripting, and making slight modifications to the form when scripting is available so that the Enter key moves to the next field, and it submits once the last field has been entered.

    This example submits to test.html, but you can have it submit of course to a php script which then redirects back to the page.
    Or, you can use ajax to submit and not have a page reload occur at all.
    the textbox data from barcode scan by scanner and also I don't have submit button.

    Thank you

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newphpcoder View Post
    the textbox data from barcode scan by scanner and also I don't have submit button
    The init function hides the submit button, and exists purely so that the script can easily submit the form.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thank you..


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
  •