requestcode
04-24-2003, 06:24 PM
I have this script example (below) that will cause the cursor to jump from one form text element to another when the maximum number of characters has been reached. It works fine, but I would like to use the DOM to determine what the next element is rather than hard coding it in when I call the function. I also would like to be able to determine the maxsize of the element. Can anybody point me to some code examples for this or documentation? I have looked at the treewalker script and also have been to Netscapes Devedge site. Still not understanding how it works. Any help would be appreciative. Thank you.
<html>
<head>
<title>Jump cursor to next Text Box</title>
<script language="JavaScript">
function nextelm(fldobj,elmname,frmname,maxchar)
{
if(fldobj.value.length==maxchar)
{
document.forms[frmname.name].elements[elmname].focus()
}
}
</script>
</head>
<body onload="document.myform.txt1.focus()">
<center>
<form name="myform">
<input type="text" name="txt1" size="4" maxlength="4" onkeyup="nextelm(this,'txt2',this.form,4)">
<input type="text" name="txt2" size="5" maxlength="5" onkeyup="nextelm(this,'txt3',this.form,5)">
<input type="text" name="txt3" size="4" maxlength="4">
</form>
</center>
</body>
</html>
liorean
04-24-2003, 06:26 PM
this.nextSibling, given you know there's no other elements between them.
requestcode
04-24-2003, 06:42 PM
Ok if I pass that to the function like this:
onkeyup="nextelm(this,this.nextSibling,this.form,4)"
How do I extract the name or id of the element. I was able to get the nodeName by doing this:alert(elmname.nodeName). This tells me it is a text element.
liorean
04-24-2003, 06:53 PM
Oh, yeah... I forgot about that. Try this code:function nextelm(elm){
if(elm.getAttribute('maxlength')!=elm.value.length)
return true;
var next=elm;
do
next=next.nextSibling;
while(next.nodeName!='INPUT');
next.focus();
return true;
}
and send just this to the function instead.
[edit: now this should work]
requestcode
04-24-2003, 06:57 PM
Ok I will play around with that. Thanks for your help. Can you point me to some tutorials on the DOM?
liorean
04-24-2003, 07:24 PM
Not really - most sites bring up just a very minor part of the DOM. The best sources as it looks right now can be found in my Resources and Documentation sticky in the JS programming forum.
scottandrew.com used to have a very good tutorial, but I can't find it now.
requestcode
04-24-2003, 07:24 PM
Ok I played around with your code. Here is what I have:
function nextelm(fldobj,frmname)
{
maxlen=fldobj.getAttribute('maxlength')
if(fldobj.value.length==maxlen)
{
next=fldobj
next=next.nextSibling
next.focus()
}
}
I am getting the error that next.focus is not a function. If I place "next" in an alert I get "[object Text]". I tried using this:
nextid=next.getAttribute('id')
This also errors with "next.getAttribute" is not a function.
I also forgot that this is how I call the function:
onkeyup="nextelm(this,this.form)"
liorean
04-24-2003, 07:34 PM
Oh, you need nothing else than the element itself for this to work.
Your problem with getting the textnode instead of the form field is solved in my code by this loop: do
next=next.nextSibling;
while(next.nodeName!='INPUT');
You really don't need to send the form element - it's obsolete as you don't use if in the function.
I edited the code - try the new one called by just onkeyup="return nextelm(this);"
(BTW, how does this handle holding a key down?)
requestcode
04-24-2003, 07:49 PM
Ok I am getting closer. Now it jumps to the next text element before it reaches the maximum length. I probably have a logic error somewhere. I will play around with it some more and see what I come up with. Thank you for your help.
requestcode
04-24-2003, 07:52 PM
Ok it was a stupid logic error. I was comparing the maxlength to the maxlength rather than the length of the value property. It works great now.
liorean
04-24-2003, 08:28 PM
That's probably my fault - that was one of the things I corrected in the edited version.
cheesebagpipe
05-01-2003, 06:10 AM
http://www.scottandrew.com/weblog/articles/dom_1 :cool:
