Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using the DOM to get info about form elements

    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>

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    this.nextSibling, given you know there's no other elements between them.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Oh, yeah... I forgot about that. Try this code:
    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]
    Last edited by liorean; 04-24-2003 at 07:36 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I will play around with that. Thanks for your help. Can you point me to some tutorials on the DOM?

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)"

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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:
    Code:
        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?)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    That's probably my fault - that was one of the things I corrected in the edited version.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •