SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Error with form counter that was working fine

    Hello,

    Maybe it is because I am way too tired as been working non-stop for days
    But for whatever reason I cannot find out why all of a sudden the JS code on a part of a form is not working.

    The code is supposed to count the number of Characters in a textarea field and not allow the user to type
    more than the allotted number of Characters. The JS code is:

    function textCounter_rem(maxlimit) {

    var field = document.getElementById("description");
    var cntfield = document.getElementById("rem");
    if (field.value.length > maxlimit) {
    field.value = field.value.substring(0, maxlimit);}
    else
    {cntfield.value = maxlimit - field.value.length;}
    }

    But all of a sudden it is not working!

    You can see a sample client page here:
    http://www.anoox.com/submit_confirm_...40&action=edit

    As you can see when you type in the field for: Description of this Site
    The "Number of Characters remaining" field is not changing and the user can type past 200!

    Thanks.

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The page requires a login.

    Remember that JS can be turned off, too, so you might want to set a maxlength="200" attribute in the HTML itself, or set a limit in the PHP behind the scenes.

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m,

    Sorry for providing a URL that was password protected.
    Here is the problem in a non-password protected mode:

    http://www.anoox.com/submit_confirm_...21271231172891

    So again the problem is the counter on the "Description of this Site" textarea is all of a sudden not working.
    That is not counting as users type in and thus stopping them when they hit the maximum allowed 200 Chars!

    ThanX,

    Quote Originally Posted by ralph.m View Post
    The page requires a login.
    Remember that JS can be turned off, too, so you might want to set a maxlength="200" attribute in the HTML itself, or set a limit in the PHP behind the scenes.

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I don't know enough JS to help with this, so we'll have to wait for someone to step in. However, just looking at the code, I would expect field.value.length to evaluate to 3, rather than 200—if I understand .length properly. That may be a problem.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,811
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Viewing that page the error console reports:

    Uncaught exception: TypeError: Cannot convert 'field' to object
    Error thrown at line 159, column 1 in textCounter_rem(maxlimit) in http://www.anoox.com/submit_confirm_...1271231172891:
    if (field.value.length > maxlimit)

    So opening the debugger (which all browsers except Firrefox have built in) and it shows that field = null.

    Given that field was assigned the value document.getElementById('desc') a couple of lines earlier this means that there is no id="desc" in the page - which there isn't as the field you are trying to validate has id="description".
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    document.getElementById('desc')
    Dang, I'm sure that's changed since I looked at the page. I was sure all the IDs matched.

    Nice explanation of the steps, felgall.

  7. #7
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Figured out what the problem was.
    We had 2 definition of the same JS function!

    Cheers

    Quote Originally Posted by felgall View Post
    Viewing that page the error console reports:
    Uncaught exception: TypeError: Cannot convert 'field' to object
    Error thrown at line 159, column 1 in textCounter_rem(maxlimit) in http://www.anoox.com/submit_confirm_...1271231172891:
    if (field.value.length > maxlimit)

    So opening the debugger (which all browsers except Firrefox have built in) and it shows that field = null.

    Given that field was assigned the value document.getElementById('desc') a couple of lines earlier this means that there is no id="desc" in the page - which there isn't as the field you are trying to validate has id="description".

    Anoox search engine volunteer

    www.anoox.com


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
  •