SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry I Am Such A Javascrpt Idiot

    I don't why I can program and work with databases all day long, but when it comes to even the simplest javascript I still have problems

    I was just trying to a simple things with forms so that when one box has the right number of characters it jumps to the next box.

    Code:
    <script>
    function changeInputFocus(thisInput, nextInput, maxChars)	{
    		var inputVal = getElementByID(thisInput);
    		if(inputVal.value.length >= maxChars)	{
    			// Application is the name of the form
    			document.Application.nextInput.focus();
    		}
    	}
    </script>
    
    --- within form ---
    <input name="phone1" type="text" size="3" maxlength="3" value="" onkeypress="javascript: changeInputFocus('phone1', 'phone2', 3)">-
    <input name="phone2" type="text" size="3" maxlength="3" value="">-
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, here's what is wrong.
    • document.Application.nextInput tries to find a form element in the Application form with a name or id of 'nextInput', and not the string contained by nextInput
    • The getElementById() method does exactly what it says: Gets an HTML Element based on an id. Your inputs don't have an id, just a name.
    • getElementById() is a method to document and needs to be expressed as such: document.getElementById(thisInput);
    However, that is an unessecary step (assuming we fixed the 2nd problem and assigned an id), because we can use the this keyword in place of passing the element's name as a string.

    Other improvements:
    • We can use that element's form property and the form's elements collection to get the nextInput reference WITHOUT hardcoding the form information into the function (this allows us to re-use it for the next step).
    • Also, we can use the element's maxlength attribute for our function (in which your condition was a BIT off, we only need to test for equality) instead of a 3rd parameter to the function.
    • Lastly, the javascript: protocol isn't needed inside an event property, and is actually improper.
    So, with all that said, here's the code!
    Code:
    <script>
    function changeInputFocus(elem, nextInput) {
    	if(elem.value.length == elem.getAttribute('maxlength'))
    		elem.form.elements[nextInput].focus();
    	}
    </script>
    
    <input name="phone1" type="text" size="3" maxlength="3" value="" onkeypress="changeInputFocus(this, 'phone2')" />
    <input name="phone2" type="text" size="3" maxlength="3" value="" onkeypress="changeInputFocus(this, 'phone3')" />
    <input name="phone3" type="text" size="4" maxlength="4" value="" />
    Last edited by beetle; Nov 14, 2002 at 13:16.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am once again in your debt

    Let me see if I fully understand -

    You're passing the actual element the function is being called from with the 'this' keyword. You then assign it to the 'elem' variable. So 'elem' is now the same as 'document.Application.phone1'. Correct? If so, how does 'elem' get used for working with the second form element?
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first a tiny bit a clarification. We don't actually pass the form element, per se, but a reference to it. But yes, elem is now a reference to 'document.Application.phone1' (for the first time anyway).

    Every form element has a form property that is a reference to it's form. So, in this case, saying elem.form is identical to saying document.Application. Now, every form has an elements collection, which I believe is pretty self-explanatory. Using the lookup operator [] we can grab an element by it's index within the collection, a string representing it's name or id, or a string variable containing it's name or id. In the following example the variable e becomes a reference to document.Application.phone1 in each instance. (assuming elem is a reference to any element within the Application form and that the phone1 input is the first to appear the form...in source order)

    var inpt = 'phone1';
    var e = elem.form.elements[0];
    var e = elem.form.elements['phone1'];
    var e = elem.form.elements[inpt];

    Is it all making sense now?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

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