Forum Moderators: open

Message Too Old, No Replies

Jumping Focus of Input Box

The OnKeyUp functionality you often see in forms

         

Argblat

11:58 pm on Oct 17, 2005 (gmt 0)

10+ Year Member



Hi all,

I'm having some annoying issues with some code I modified in order to have the focus change from one input box to the next after the maximum amount of characters have been reached (This specific script will be for entering phone numbers).

Most importantly, the code seems to be working fine inline (minus the warnings if i open the javascript cosole) BUT if I throw the code into its own .js file and call it from the page, it gives me functionality problems.

The code is bringing up the following message in the Firefox Javascript Console,


"Error: [Exception..."'Permission denied to get property XULElement.selectedIndex' when calling method: [nslAutoCompletePopup::selectedIndex]" nsresult:"0x8057001e(NS_ERROR_XPC_JS_THREW_STRING)"location: "JSframe :: [localhost...] :: check3 :: line 48" data: no]"

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" language="javascript">
// JavaScript Document

//Jump Box Functions for Phone
function check1()
{
var letters = document.form1.leadPhone1a.value.length + 1;
if (letters <= 3)
{
document.form1.leadPhone1a.focus();
}
else
{
document.form1.leadPhone1b.focus();
}
}

function check2()
{
var letters = document.form1.leadPhone1b.value.length + 1;
if (letters <= 3)
{
document.form1.leadPhone1b.focus();
}

else
{
document.form1.leadPhone1c.focus();
}
}

function check3()
{
var letters = document.form1.leadPhone1c.value.length + 1;
if(letters <= 4)
{
document.form1.leadPhone1c.focus();
}

else
{
document.form1.leadPhone2a.focus();
}
}

function check4()
{
var letters = document.form1.leadPhone2a.value.length + 1;
if(letters <= 3)
{
document.form1.leadPhone2a.focus();
}

else
{
document.form1.leadPhone2b.focus();
}
}

function check5()
{
var letters = document.form1.leadPhone2b.value.length + 1;
if(letters <= 3)
{
document.form1.leadPhone2b.focus();
}

else
{
document.form1.leadPhone2c.focus();
}
}

//End of Jump Box Functions

</script>
</head>

<body>
<form method="post" name="form1">
<input type='text' name="leadPhone1a" size='3' maxlength='3' onKeyUp="check1()" />
<input type='text' name="leadPhone1b" size='3' maxlength='3' onKeyUp="check2()" />
<input type='text' name="leadPhone1c" size='4' maxlength='4' onKeyUp="check3()" /> <br /><br />

<input type='text' name="leadPhone2a" size='3' maxlength='3' onKeyUp="check4()" />
<input type='text' name="leadPhone2b" size='3' maxlength='3' onKeyUp="check5()" />
<input type='text' name="leadPhone2c" size='4' maxlength='4' />
</form>
</body>
</html>

Anyone know what is going on here...does the error message have to do with my .js file issues?

Also, for those of you (if any) who really get into this (and I really hope that you do)...is there a better way to optimize my code, as I'm not seeing one currently that is worth the trouble.

Muchos Gracias,
Mike

muneepenee

11:57 am on Oct 18, 2005 (gmt 0)



1. dont no bout yer maen problem with .js file
never werk for me, so me gave up triing.
2. I hav similiar kode if yu want sumthang tu kompare with. It hav more cheking than wot yu sho.
--------------------------
<html>
<body bgcolor="#aaffbb" text="black">
<pre>
c:\web\jtest5.htm, Sundae, 11 Sep 05 at 1130
1. input form...numbers such as SSn or fone number
2. kount # chars in eech feeld as yuzer input it
3. wen feeld full, jump tu next feeld
4. if nondigit input, tell yuzer & get rid av that char
<!>
<script language="JavaScript">
<!-- ***************** javaskript ****************
//* document.write("<pre>");
var tudae=new Date();
document.write("\n tudae=",tudae);
//*
//*
//**************** gonextfld
function gonextfld(kaller,maxleng, kallevnt){
//***** 1. value=all chars in now feeld
kalvalu=kaller.value;
kalleng=kaller.value.length;
keekode=kallevnt.keyCode;
//***** temp wile testing...sho sum stuff
//* string1="1, in funk auto, max="+maxleng+", value="+kalvalu;
//* string2=", kall leng="+kalleng;
//* string3=", kee kode="+keekode;
//* skript1=string1+string2+string3;
//* alert(skript1);
//********** if yuzer input tab, retern, bakspaes...exit
//* tab...system muves kerser tu next feeld
//*** ignores bakspaes...mae wanna chaenj & move tu b4 feeld
if(keekode == 0){return true}//null
if(keekode == 8){return true}//bakspaes
if(keekode == 9){return true}//tab
if(keekode == 13){return true}//retern
//*
//***** 2. wich feeld yuzer is on...0,1,2...(max-1)
nowindex=kountflds(kaller);
numboxes=kaller.form.length;
//* string1="2. feeld index="+nowindex;
//* string2=" # boxes="+numboxes;
//* skript1=string1+string2;
//* alert(skript1);
//*
//***** 3. if tu many chars in now-feeld, cut it
if(kalleng > maxleng){
//* isolate first fyu chars...up tu maxleng chars
nuvalu=kalvalu(0,maxleng);
//* rite thees chars bak intu kallers feeld
kaller.value=nuvalu;
kalvalu=nuvalu;
kalleng=maxleng;
}
//****** bottom av if
//*
//***** 4.input gotta be digits onlee...chek it
numerr=0;
werkstring="";
kalleng=kalvalu.length;
for(loopd=1; loopd <= kalleng; loopd=loopd+1){
//* isolate 1 char
nowspot=loopd-1;
char01=kalvalu.charAt(nowspot);
//* see if it is a digit
number=ifdigit(char01);
if(number >= 0){werkstring=werkstring+char01}
if(number < 0){
numerr=numerr+1;
string1="error...nondigit="+char01+", will remuev it";
alert(string1);
}
//***** bottom av if
}
//***** bottom av loop
if(numerr > 0){kaller.value=werkstring;
kalvalu=werkstring}

//*
//***** 5.if now feeld is full, muev tu next feeld
kalleng=kalvalu.length;
if(kalleng >= maxleng){
maxindex=numboxes -1;
nextindex=nowindex+1;
if(nextindex > maxindex){nextindex=0}
//* string1="4. muev tu next fleed...index="+nextindex;
//* alert(string1);
//******* muev kerser forward 1 feeld....set focus
kaller.form[nextindex].focus();
}
//***** bottom av if
}
//******** bottom av gonextfld
//*
//*
//**************** kountflds
function kountflds(kaller){
numboxes =kaller.form.length;
var index=-1;
var i =0;
//*********** loop thru input feelds
for(i=0; i < numboxes; i=i+1){
if(kaller.form[i] == kaller){index=i;return index}
}
//******** bottom av loop
return index}
//***** bottom av kountflds
//*
//*************** ifdigit *****************
function ifdigit(inchar){
//* see if kaller's char is a digit
//* if yes, giv him anser=0 tu 9.... not digit...anser=-1
//** Wednesdae 24 Dec 03 at 1315
//***********
var testchar1=inchar.charAt(0);
//* document.write("\n top av ifdigit, char=",testchar1);
var anser=-1;
var cdigits=new Array(11);
cdigits[1]="0";
cdigits[2]="1";
cdigits[3]="2";
cdigits[4]="3";
cdigits[5]="4";
cdigits[6]="5";
cdigits[7]="6";
cdigits[8]="7";
cdigits[9]="8";
cdigits[10]="9";
//***** isolate char 1 from kaller's string
var loopd=0;
for(loopd=1; loopd <=10; loopd=loopd+1){
var digitx=cdigits[loopd];
if(testchar1 == digitx){
anser=loopd-1;
return anser}
}
anser=-1;
return anser}
//********* bottom av ifdigit
//*
//****************** program start *************
//*
document.write("\n ****** bottom av skript stuf");
// -->
</script>
<!******************* html *******************>
<!******** form>
<form name="inputf"
<table>
<tr>
<! ************* fone number=3 feelds>
</pre>
<td>fone number
<input size="4" maxlength="3"
onKeyUp="return gonextfld(this,3,event)">
<! temp test...transparent bakground>
<! style="background:transparent">
<input onKeyUp="return gonextfld(this, 3, event)" size="4" maxlength="3"> -
<input onKeyUp="return gonextfld(this, 4, event)" size="5" maxlength="4">
</td>
</tr>
<!*********>
<br>
<tr>
<td>Social Security Number
<input onKeyUp="return gonextfld(this, 3, event);" size="4" maxlength="3"> -
<input onKeyUp="return gonextfld(this, 2, event);" size="3" maxlength="2"> -
<input onKeyUp="return gonextfld(this, 4, event);" size="5" maxlength="4">
</td>
</tr>
</table>
</form>
<!****** bottom av form>
<script language="JavaScript">
<!--
//* this puts kerser on first element in the form but onlee on loed
document.forms[0].elements[0].focus();
//*
//-->
</script>
</body>
</html>

kaled

12:21 pm on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Argblat,
The commonest cause of errors when moving js code to an external file is failing to remove the HTML wrapping code. For instance, <!-- //keep old browsers happy ..... --> must not be used in js files.

Another likely cause is referring to js code that remains in the html file but is in another block.

Having skimmed through your js code, I can't see anything likely to throw an error (unless you left in the <script> tags top and bottom. However, I also noticed that all the js seems to be specific for that one page. Normally, page-specific code is left embedded in html pages. You only need to move js code to external files if it is general purpose and will be shared between two or more html pages.

muneepenee,
You may think your daft English is really clever and super cool - it isn't. Some members of WebmasterWorld struggle with plain english never mind your variety. I for one will not waste my time reading what you have to say if you can't say it properly.

Kaled.