easy javascript problem countdown field

**wheeler** · May 10, 2007, 17:29

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...

**Kravvitz** · May 10, 2007, 18:45

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);
  }
}

**wheeler** · May 10, 2007, 18:58

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.

**Kravvitz** · May 10, 2007, 19:02

So you removed the textCounter() function? That's why it won't work.

**wheeler** · May 10, 2007, 20:10

Originally Posted by Kravvitz

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

)

**Kravvitz** · May 10, 2007, 20:27

"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.

**wheeler** · May 10, 2007, 21:12

Originally Posted by Kravvitz

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!

User Tag List

Thread: easy javascript problem countdown field

Thread Tools

Display

easy javascript problem countdown field

Bookmarks

Bookmarks

Posting Permissions