Question

I’m pulling data from a database and displaying it in a textarea(s). I have a characters count down javascript. the textarea(s) are being repeated for each entry from the database/table.

<SCRIPT type="text/javascript">
<!-- Begin
    function textCounter(field,cntfield,maxlimit) {
        if (field.value.length > maxlimit) // if too long...trim it!
            field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
        else
            cntfield.value = maxlimit - field.value.length;
}
//  End -->
</script>

Here is the php:

echo "<b>$ID : $adname</b><br /><a href=\"?action=deletead&IDnum=$ID\">Delete Ad</a><br /><br />\n";
    echo "Preview :<br /><div class=\"adcode\">$adcode</div><br /> \n";
    echo "<br />\n";
    echo "<form action=\"displayads.php\" name=\"addAD$ID\" method=\"post\">\n";
    echo "AD code (can be any type of script) text link, javascript or banner :<br />\n";
    echo "Code :<br /><textarea name=\"adcode$ID\" wrap=\"physical\" cols=\"60\" rows=\"5\" onKeyDown=\"textCounter(document.addAD$ID.adcode$ID,document.addAD$ID.remLen$ID,5000)\" onKeyUp=\"textCounter(document.addAD$ID.adcode$ID,document.addAD$ID.remLen$ID,5000)\">$adcode</textarea>";
    echo "<br /><input readonly type=\"text\" name=\"remLen$ID\" size=\"3\" maxlength=\"3\" value=\"5000\">Characters Left \n";
    echo "<input type=\"submit\" name=\"editad$ID\" value=\"Edit AD Code\"></form>\n";
    echo "<br /><hr />";

The question is how can I do an onload page load event to make all the textarea(s) with the unique name textarea name=\”adcode$ID\” reflect the correct character count onload. instead now it reflects the right amount only when you change the information in the textarea.

Answer 1

A quick and dirty way to do it would be to loop through the textareas and fire off the function bound to the onkeyup event…

(function () {
    var textareas = document.getElementsByTagName('textarea'),
        i = 0;
    for (i = 0; i < textareas.length; i += 1) {
        textareas[i].onkeyup();
    }
}());​

UPDATE:

Yes, this should be run on load, or at least after the textareas have rendered.

function addHandler(obj, evType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on" + evType, fn);
        return r;
    } else {
        return false;
    }
}
addHandler(window, 'load', function () {
    var textareas = document.getElementsByTagName('textarea'),
        i = 0;
    for (i = 0; i < textareas.length; i += 1) {
        //fire off the "onkeyup" handler.
        textareas[i].onkeyup();
    }
});

or:

<!-- this script block should be inserted after all of the textareas. -->
<script type="text/javascript">
    (function () {
        var textareas = document.getElementsByTagName('textarea'),
            i = 0;
        for (i = 0; i < textareas.length; i += 1) {
            //fire off the "onkeyup" handler.
            textareas[i].onkeyup();
        }
    }());
</script>