How to limit number of characters in textarea?

I have a textarea input field for the email message. How do i limit the number of characters in the field to, say 10000?

Michael

Hi Michael, did you try the maxlength attribute ?

Hi Max!

According to the HTML 4.01 Specification (http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.7)there is no such attribute for a form textarea object. So, how do you best do it in ChronoForms?

Michael

Hi Michael,

Quirksmode - and a little JavaScript - is your friend.

Bob

Hi Bob!

You don't realy think i can get i to work just like that, do you?

I put this initialization call att the beginning of my form HTML:

<script type="text/javascript">
  setMaxLength;  
</script>

I put the two textarea maxlength functions in the form Javascript:

function setMaxLength() {
	var x = document.getElementsByTagName('textarea');
	var counter = document.createElement('div');
	counter.className = 'counter';
	for (var i=0;i<x.length;i++) {
		if (x[i].getAttribute('maxlength')) {
			var counterClone = counter.cloneNode(true);
			counterClone.relatedElement = x[i];
			counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
			x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
			x[i].relatedElement = counterClone.getElementsByTagName('span')[0];

			x[i].onkeyup = x[i].onchange = checkMaxLength;
			x[i].onkeyup();
		}
	}
}

function checkMaxLength() {
	var maxLength = this.getAttribute('maxlength');
	var currentLength = this.value.length;
	if (currentLength > maxLength)
		this.relatedElement.className = 'toomuch';
	else
		this.relatedElement.className = '';
	this.relatedElement.firstChild.nodeValue = currentLength;
	// not innerHTML
}

I added the maxlength attribute for the textarea:

<textarea class="cf_inputbox required" maxlength="100" rows="10" id="message" cols="70" name="message"></textarea>

But i can see no counter. I suspect the init call. But where am i to put the call if not in the form html?

And another thing, this does not limit the length, only provide a visible counter.
Should i put somthing in php in the server side validation code in order to actually limit the length? And if so, what?

Michael

Hi Michael,

This code needs to go at the *end* of the form html so that it runs after the form is loaded

<script type="text/javascript">
setMaxLength();
</script>

What do you want the behaviour to be if the entry is too long? The Quirkmode version uses a server-side trim to cut down to size. You could just block the entry with

this.disabled=true;

but that might be heavy handed and doesn't allow the user to edit.

this.style.borderColor= 'red'

is another alternative!

Bob

PPS The image is disabled, has a red background to the counter and a red border to the textarea.
[attachment=0]22-11-2008 15-10-26.png[/attachment]

Thanks Bob!

The counter works now and looks really good with the border changing to red when to many characters and then back again to gray when characters are deleted.

As for how to handle too many characters at submit, there should be an error message and the user should be returned to the form (with the form content intact) so that the message can be revised. I imagine this has to go in the server-side php code, since the user can disable javascript in his browser.

Any input on how to implement this would be greatly appreciated.

Michael

Hi Michael,

this has to be done in the server side validation box, use "return" to return some error after you check the characters limit! see the code example beside the box to have an idea how this works!

Regards,
Max

Almost there now...

Two main things remain now:
1. If the form has failed server-side validation and the form is redisplayed, the counter displays "0/1000" even if there are too many characters in the textarea. I obviously need to refresh the counter by triggering the .onkeyup() event for the textarea. How and where do i trigger that event and what is the correct syntax? (I am a total newbie when i comes to javascript).
2. Any error from server-side validation or captcha validation is never cleared. The user will see the same old error message even if he returns to the form at a later stage. I think you are aware of this Max and that this will be fixed in the next version. When can we expect this new improved version?

Michael

Hi Michael,

#1- try to google for the onLoad event for the page and trigger the counter there too!
#2- I'm working on it, no time line I can tell now, still no idea but not before 2 weeks for sure, can you drop me a message here after 2 days or so ? I may have a fix for this issue only.

Regards,
Max

Hi Max!

Have you found a fix for the issue with the sticky error messages?

Michael

Hi, this should be today, was alittle busy the last 2 days!

Regards
Max

Hi, in chronocontact.php find:

if ( md5($chrono_verification ) != $sessionvar ) {

add below it :

JRequest::setVar('cf_wrong_security_code', 1);

then in chronocontact.html.php find :

if(($session->get('chrono_verification_msg', '', md5('chrono')))

make this whole line as :

<?php if(($session->get('chrono_verification_msg', '', md5('chrono')))&&(JRequest::getVar('cf_wrong_security_code') == 1)){ ?>

Regards
Max