CODEWITHSUNDEEP
javascripthtmlcssformstextarea
Tom
Tom

Reputation: 119

word limits on multiple text areas

I am creating a website with four textarea forms. Each form has a word limit.

I have tried using existing examples that I have found when trying to fix this problem but nothing seems to work.

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var maxwords = 250;
//
function check_length(obj, cnt, rem)
{
    var ary = obj.value.split(" "); // doubled spaces will throw this off
    var len = ary.length;
    cnt.innerHTML = len;
    rem.innerHTML = maxwords - len;
    if (len > maxwords) {
        alert("Message in '" + obj.name + "' limited to " + maxwords + " words.");
        ary = ary.slice(0,maxwords-1);
        obj.value = ary.join(" "); // truncate additional words
        cnt.innerHTML = maxwords;
        rem.innerHTML = 0;
        return false;
    }
    return true;
} 

</script>

HTML

   <textarea name="Message 1" onkeypress="
 return check_length(this,
 document.getElementById('count1'),
 document.getElementById('remaining1'));"></textarea>
Word count: <span id="count1">0</span> &nbsp;
Words remaining: <span id="remaining1">250</span>

<textarea name="Message 2" onkeypress="
 return check_length(this,
 document.getElementById('count2'),
 document.getElementById('remaining2'));"></textarea>
Word count: <span id="count2">0</span> &nbsp;
Words remaining: <span id="remaining2">500</span>

Does anyone know a solution to this problem?

Thanks in advance, Tom

Upvotes: 0

Views: 1884

Answers (3)

Mike
Mike

Reputation: 781

Add an extra parameter to your function, and send it the maxWords from each function call:

function check_length(obj, cnt, rem, maxwords)
{
//... rest of the function would stay the same

and when you call it, include the max words

<textarea name="Message 2" onkeypress="
 return check_length(this,
 document.getElementById('count2'),
 document.getElementById('remaining2'), 250);"></textarea>
Word count: <span id="count2">0</span> &nbsp;
Words remaining: <span id="remaining2">500</span>

To remove the words remaining, 

function check_length(obj, cnt, maxwords)
{
    var ary = obj.value.split(" "); // doubled spaces will throw this off
    var len = ary.length;
    cnt.innerHTML = len;

    if (len > maxwords) {
        alert("Message in '" + obj.name + "' limited to " + maxwords + " words.");
        ary = ary.slice(0,maxwords-1);
        obj.value = ary.join(" "); // truncate additional words
        cnt.innerHTML = maxwords;
        return false;
    }
    return true;
}

and in your HTML,

<textarea name="Message 1" onkeypress="
return check_length(this,
document.getElementById('count1'),250);"></textarea>
Word count: <span id="count1">0</span> &nbsp;

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

The problem with your function is that you're always checking the amount of words inserted against maxwords variable (which is set to 250 words as the first textarea limit)

so a better attempt is to pass an extra parameter to the function with the original limit (different for each textarea)

Upvotes: 0

CosminO
CosminO

Reputation: 5226

insert a class attribute for those textareas, (like class='area250', class='area500' and so on) then include an if statement in the function 

function check_length(obj, cnt, rem)
    {
        if(window.event.srcElement.getAttribute('class')=='area250')
            maxwords=250;
        else if(window.event.srcElement.getAttribute('class')=='area500')
            maxwords=500;
        else .......................................

    }

Upvotes: 0

Related Questions