SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    easy javascript problem countdown field

    howdy,

    i'm pretty hopeless with javascript.

    I have this javascript:
    Code:
    // countdown for text field
    function textCounter(field,cntfield,maxlimit) {
    if (field.value.length > maxlimit) // if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    // otherwise, update 'characters left' counter
    else
    cntfield.value = maxlimit - field.value.length;
    }
    and this form:
    Code:
    <form id="sell_item" name="sell_item" method="post" action="?submit">
    
    <input name="title" type="text" id="title" 
    onkeydown="textCounter(document.sell_item.title,document.sell_item.Length,60)" 
    onkeyup="textCounter(document.sell_item.title,document.sell_item.Length,60)" 
    <?php form($title); ?> size="60" maxlength="60" />
    <input name="Length" type="text" value="<?php echo 60-strlen($title); ?>" size="2" readonly="readonly" />
    </form>
    now this works, but the problem is, it requires the name attribute on the form to work. I'm a compliance nut and name is not a valid xhtml attribute. So I know I need to modify the code to getelementbyid, but I can't seem to get it to work...
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the inline event handlers and the <form>'s name attribute.
    Then add this your JS code.
    Code:
    window.onload = function(){
      if(!document.getElementById) return;
      var title = document.getElementById('title');
      var Length = document.getElementById('Length');
      if(!title || !Length) return;
      title.onkeypress = function(){
        textCounter(title,Length,60);
      }
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've gone all simple but I still can't get your code to work
    Code:
    <html>
    
    <head>
    <script type="text/javascript">
    window.onload = function(){
      if(!document.getElementById) return;
      var title = document.getElementById('title');
      var length = document.getElementById('length');
      if(!title || !length) return;
      title.onkeypress = function(){
        textCounter(title,length,60);
      }
    }
    </script>
    </head>
    
    <body>
    
    <form id="sell_item" method="post" action="">
    
    <input name="title" type="text" id="title" /> 
    <input name="length" type="text" id="length" value="60" />
    
    </form>
    
    </body>
    </html>
    what am I missing here? Just to clarify, the initial value of the box length will be 60, and on each keydown it will update with the remaining allowed characters.
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you removed the textCounter() function? That's why it won't work.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Remove the inline event handlers and the <form>'s name attribute.
    I thought thats what you meant by remove inline event handlers?

    How do I add the textCounter function to the existing code (see, I really do suck at JS )
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Inline event handlers" means the HTML attributes.

    You just put them in the same script element. It would be better to use an external .js file though.
    Code:
    <script type="text/javascript">
    // countdown for text field
    function textCounter(field,cntfield,maxlimit) {
      if (field.value.length > maxlimit) // if too long...trim it!
        field.value = field.value.substring(0, maxlimit);
      // otherwise, update 'characters left' counter
      else
        cntfield.value = maxlimit - field.value.length;
    }
    window.onload = function(){
      if(!document.getElementById) return;
      var title = document.getElementById('title');
      var length = document.getElementById('length');
      if(!title || !length) return;
      title.onkeypress = function(){
        textCounter(title,length,60);
      }
    }
    </script>
    P.S. I hope you would use complete doctype in a real page.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    P.S. I hope you would use complete doctype in a real page.
    cheers mate, works like a charm! Don't worry, I will be using an external js file and valid doctype... remember the original worked, I just couldn't stand the validation error of using the name attribute on the form!
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development


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
  •