...

View Full Version : Need help in moving focus to the next textfield



newphpcoder
05-30-2012, 07:11 AM
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

newphpcoder
05-30-2012, 09:34 AM
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:



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum