JavaScript Error with form counter that was working fine

[WorldNews]

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:

ERROR: Missing Page

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.

[ralphm]

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.

[WorldNews]

Hello ralph.m,

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

ERROR: Missing Page

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,

@ralph_m

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.

[ralphm]

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.

[felgall]

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_new.php?w=20121271231172891:
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”.

[ralphm]

@felgall

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.

[WorldNews]

Thanks.
Figured out what the problem was.
We had 2 definition of the same JS function!

Cheers

@felgall

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_new.php?w=20121271231172891:
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”.