How can I limit number of characters in textarea outside of form tag?

[Haitashi]

This is in the head:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

This is the form:

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

The issue is that the textarea where I plan to use this script doesn't live inside a form tag. And, as you can see, one of the arguments being passed in is the "this.form".

I need the form info for the ELSE of the function. Any suggestions? Adding a form tag is not recommended for me at the moment.

THANKS!

[hsriat]

Instead of making the referance as this.form.limitedtextarea, you can just write this, because you are inside that textarea tag (limitedtextarea).

And for the countdown text, you can use document.getElementById('countdown') (for this you need to add id="countdown" to the countdown input tag)


Regards,
Harpreet

[Murdz]

A textarea should always be inside a <form> tag.

[hsriat]

A textarea should always be inside a <form> tag.

Not a mandatory requirement!

[Haitashi]

Yeah, I knew it wasn't mandatory. In the way our application is created, there are specific reasons why they placed this field outside a form tag.

Anyways. I made the suggested changes. My field looks like this:

    <textarea name="creditNotes" onKeyDown="limitText(this.creditNotes,document.getElementById('countdown'),100);" onKeyUp="limitText(this.creditNotes,document.getElementById('countdown'),100);" id="creditNotes" cols="40" rows="6" style="width:324px; height:82px;"></textarea></div>
            <font size="1">(Maximum characters: 100)<br>
            You have <input readonly type="text" id="countdown" name="countdown" size="3" value="100"> characters left.</font>

The script looks the same as before. However, I an error that states that limitField has no properties. "limitField" should contain the value of the "creditNotes" field.

[hsriat]

Do this change:

<textarea name="creditNotes" onKeyDown="limitText(this, document.getElementById('countdown'), 100);" onKeyUp="limitText(this, document.getElementById('countdown'), 100);" id="creditNotes" cols="40" rows="6" style="width:324px; height:82px;"></textarea>
 
</div>
 
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" id="countdown" name="countdown" size="3" value="100"> characters left.</font>

[Haitashi]

It worked! Thank you very very much Harpreet! ^_^

[hsriat]

You are welcome. :)

You know when you write this inside a tag, you refer to that particular tag. So there was no need of this.creditNotes. That would return nothing.


Regards,
Harpreet