Javascript script not working

[Debbie-Leigh]

Hi,

I'm trying to validate a form field for not exceeding a certain number of characters. The problem I'm having is that I can't seem to get the script to execute by using onChange, onKeyUp etc. on the field itself. If I execute the script from a link beside the field, it works perfectly, so I know the script itself is not the problem. It's just when I try to execute it from the field statement itself that it doesn't work. I've tried putting it on a text and textarea field, but neither works.

The code I'm using is:

onChange="funCheckSize(this.frmEdit.PageName, 1)"

I've used on onChange, onKeyDown, onKeyUp and onKeyPress, but none of them seem to be triggered.

Does anyone have any suggestions as to what I may be missing? I'm sure it's something simple.

Debbie-Leigh

[rushiku]

You don't say which browser/version you're working with...I have no problem with:

<input type='text' onKeyUp='alert("KeyUp")' onKeyDown='alert("KeyDown")'
  onChange='alert("change");' onKeyPress='alert("press");'/>

The output isn't quite what I expected

IE6 gives keydown and press
FB.7 gives a variety of responses

[Debbie-Leigh]

Eureka!! I've done it at last!

Weeelll, after a *lot* of testing I've found the solution. I knew it was something simple. It was a lack of understanding as to what was passed into the script when I was using 'this'. So I thought I'd just pass on what I've found in case it helps anyone else, as I find I get so frustrated when people don't post the solutions to their questions when they've found them.

What I now realise (which is probably so obvious to everyone else ) is that 'this' passes to the script the full reference to the element when you use it on the element's statement e.g. using OnKeyUp etc. Whereas, when you pass an element's reference to a script from a link that isn't attached to an element, you have to fully specify the element's name e.g. this.frmEdit.Comments. Obvious much?

So what I'm using now is:

<textarea name="Comments" id="Comments" size="255" cols="50" rows="20" title="Max length: 255 - Optional" tabindex="1" onKeyUp="funCheckSize(this, 255)"></textarea>

and my script now looks like this:

function funCheckSize(objElem, intMaxChars) {
	/* Return whether the field's size is greater than the specified size */
	
	if  (isNaN(intMaxChars)) {
		intMaxChars = 0;
	}
	
	if  (objElem.value.length > intMaxChars) {
		alert("This field can only hold " + intMaxChars + " characters");
		objElem.value = objElem.value.substring(0, intMaxChars);
		return false;
	} else {
		return true;
	}
}

Having said that, I did find out that even though IE6 likes 'this' on both the link (i.e. not attached to an element) and element, NS6 doesn't, so I've had to resort to using 'document' on links instead of 'this' e.g.:

<a href="javascript:funCountChars(document.frmEdit.Comments, 255, 'Comments')" tabindex="10">Count Characters</a>

Oh, and if anyone's interested, here's my count characters script:

function funCountChars(objElem, intMaxChars, strFieldName) {
	/* Count the number characters in a field */
	
	if  (strFieldName == "undefined") {
		strFieldName = "";
	} else {
		strFieldName = "for " + strFieldName + " ";
	}

	if  (intMaxChars != 0) {
		strSuffix = "\n\nThe maximum permitted length is " + intMaxChars + " characters.";
	} else {
		strSuffix = "";
	}
	alert("The number of characters " + strFieldName + "is: " + objElem.value.length + strSuffix);
}

Hope this helps anyone else who has a similar problem.

Debbie-Leigh