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