SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
May 10, 2007, 18:29 #1
- 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; }
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>
Studiotime - Time Management for Web Developers
to-do's, messages, invoicing, reporting - 30 day free trial!
Thomas Multimedia Web Development
-
May 10, 2007, 19:45 #2
- 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.
-
May 10, 2007, 19:58 #3
- 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>
Studiotime - Time Management for Web Developers
to-do's, messages, invoicing, reporting - 30 day free trial!
Thomas Multimedia Web Development
-
May 10, 2007, 20:02 #4
- 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.
-
May 10, 2007, 21:10 #5
- Join Date
- Mar 2006
- Location
- Gold Coast, Australia
- Posts
- 1,369
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Studiotime - Time Management for Web Developers
to-do's, messages, invoicing, reporting - 30 day free trial!
Thomas Multimedia Web Development
-
May 10, 2007, 21:27 #6
- 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>
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.
-
May 10, 2007, 22:12 #7
- Join Date
- Mar 2006
- Location
- Gold Coast, Australia
- Posts
- 1,369
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Studiotime - Time Management for Web Developers
to-do's, messages, invoicing, reporting - 30 day free trial!
Thomas Multimedia Web Development
Bookmarks