Need textarea counter to reset after submitting form
<p>my textarea counter is working fine.  The problem is once I submit the form...the counter stays as 0 until i type in the textare again.  Any suggestions to get it to reset after submitting....</p>

<p>thanx</p>

<p><img src="http://i.stack.imgur.com/W7RZC.jpg" alt="enter image description here"></p>

<p>Heres the jsp code:</p>

<pre><code>  &lt;%-- This is the row for adding a new comment. --%&gt;           

        &lt;tr id="commentRow"&gt;              
        &lt;td colspan="3"&gt;
         You have &lt;strong&gt;&lt;span id="commentsCounter"&gt;${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}&lt;/span&gt;&lt;/strong&gt; characters left.&lt;br/&gt;
            &lt;textarea id="comment"  name="comment" rows="2" cols="125" style="width:400px;"
                 onkeypress="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"&gt;&lt;/textarea&gt;

                    &lt;a href="javascript:addComment();"&gt;&lt;img src="../images/icon_add.gif" border="0" alt="Add"/&gt;&lt;/a&gt;
        &lt;/td&gt;

        &lt;/tr&gt;
</code></pre>

<p>heres the javascript:</p>

<pre><code>  function characterCounter(id, maxLen, inputElement)
{
    spanId = document.getElementById(id);

    if (spanId)
    {
        // Update the counter the user sees.
        var whatIsLeft = maxLen - inputElement.value.length;

        if ( whatIsLeft &lt; 0 ) whatIsLeft = 0;
        spanId.innerText = whatIsLeft;
    }

    // Restrict user from entering more than the maxlen.
    if ( inputElement.value.length &gt; maxLen )
    {
        inputElement.value = inputElement.value.substring( 0, maxLen );
    }
}
</code></pre>

<p>here's addcomment() javascript</p>

<pre><code>    function addComment()
{
    $("#commentErrors").css("visibility", "hidden");

    var obj = {comment:null};
    WhatIfDataAction.addComment(dwr.util.getValues(obj),
            {
                callback:addCommentCallback,
                timeout:60000,
                errorHandler: dwrSessionErrorHandler
            }
        );
}


function addCommentCallback( comment )
{
   if (comment.messages.length &gt; 0)
   {
         //Convert the error messages into an HTML string.
       var html = "";
       for (var i = 0; i &lt; comment.messages.length; i++)
       {
            html += "&lt;tr&gt;&lt;td&gt;" + comment.messages[i] + "&lt;/td&gt;&lt;/tr&gt;";
       }
       $("#commentErrors").html(html);
       $("#commentErrors").css("visibility", "visible");
    }
    else
    {
        // Build HTML for new row.
        var html = "&lt;tr id='id"+comment.id+"'&gt;&lt;td colspan='1'&gt;&amp;nbsp;&lt;/td&gt;" +

                   "&lt;td colspan='1'&gt;&amp;nbsp;&lt;/td&gt;" +

                   "&lt;td id='comment-"+comment.id+"'class='wrappable' style='width:360px;'&gt;" + comment.comment + "&lt;/td&gt;" +
        /*
        "&lt;td id='auditable-"+comment.id+"'&gt;" + comment.auditable + "," + comment.auditable + "&lt;/td&gt;" +
         */ 
                   "&lt;/tr&gt;"; // three empty TDs for the three actuals fields
        $("#commentRow").before(html);

        // Clear the form.
        var form = $("#commentForm").get(0);
        form.comment.value = "";

        showUnsavedEntryChangesMessage();

        reloadEntries();
       // reloadPage();


    }
}
</code></pre>

<p>I put the hide here:</p>

<pre><code>function addCommentCallback( comment )
{
   if (comment.messages.length &gt; 0)
   {
         //Convert the error messages into an HTML string.
       var html = "";
       for (var i = 0; i &lt; comment.messages.length; i++)
       {
            html += "&lt;tr&gt;&lt;td&gt;" + comment.messages[i] + "&lt;/td&gt;&lt;/tr&gt;";
       }
       $("#commentErrors").html(html);
       $("#commentErrors").css("visibility", "visible");
    }
    else
    {
        // Build HTML for new row.
        var html = "&lt;tr id='id"+comment.id+"'&gt;&lt;td colspan='1'&gt;&amp;nbsp;&lt;/td&gt;" +

                   "&lt;td colspan='1'&gt;&amp;nbsp;&lt;/td&gt;" +

                   "&lt;td id='comment-"+comment.id+"'class='wrappable' style='width:360px;'&gt;" + comment.comment + "&lt;/td&gt;" +
        /*
        "&lt;td id='auditable-"+comment.id+"'&gt;" + comment.auditable + "," + comment.auditable + "&lt;/td&gt;" +
         */ 
                   "&lt;/tr&gt;"; // three empty TDs for the three actuals fields
        $("#commentRow").before(html);

        // Clear the form.
        var form = $("#commentForm").get(0);
        form.comment.value = "";
        $("#charCountMsg").hide();       
        showUnsavedEntryChangesMessage();

        reloadEntries();
       // reloadPage();


    }
}
</code></pre>
