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:


<?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

Demo: http://jsfiddle.net/OMGCarlos/dMvGn/

You’re off to a good start, but you aren’t binding the keypress event anywhere!


//-- 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

I tried your 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

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:


//-- 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 :frowning:

Thank you

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.

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

Top of what?

Thank you

You mean this?


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

I tried this:


<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 :frowning:

Thank you

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.


<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>


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

the textbox data from barcode scan by scanner and also I don’t have submit button.

Thank you

The init function hides the submit button, and exists purely so that the script can easily submit the form.

ok thank you…