title: Display word count while user is typing message and limit the word length to 300 words
body: <p>How do I limit the short messages to 300 words and display the word count on top of the message box? The number on top of the message box doesn't seem to be decreasing when I try to type in something. </p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt; 
  var content;
  $('textarea').on('keyup', function(){
      var words = $(this).val().split(" ").length;
      $('#myWordCount').text("("+(300-words)+" words left)");
      if(words&gt;=300){
          $(this).val(content);
          alert('no more than 300 words, please!');
      } else {    
          content = $(this).val();
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Message Form:</p>
  
  <pre><code>    &lt;form action="read_message.php" method="post"&gt; 
   &lt;table class="form_table"&gt; 
    &lt;tr&gt; 
      &lt;td style="font-weight:bold;"&gt;Subject:&lt;/td&gt; 
      &lt;td&gt;&lt;input style=" width:300px" name="form_subject"/&gt;&lt;/td&gt; 
      &lt;td&gt;&lt;/td&gt; 
    &lt;/tr&gt; 
    &lt;tr&gt; 
      &lt;td style="font-weight:bold;"&gt;Message:&lt;/td&gt; 
      &lt;td id="myWordCount"&gt;300 words left&lt;/td&gt; 
      &lt;td&gt;&lt;/td&gt; 
    &lt;/tr&gt; 
    &lt;tr&gt; 
      &lt;td&gt;&lt;input type="hidden" name="sender_id" value="&lt;?php echo $sender_id?&gt;"&gt;&lt;/td&gt; 
      &lt;td&gt;&lt;textarea cols="50" rows="4" name="form_message"&gt;&lt;/textarea&gt;&lt;/td&gt; 
      &lt;td valign="bottom"&gt;&lt;input type="submit" name="submit_message" value="send"&gt;&lt;/td&gt; 
    &lt;/tr&gt; 
   &lt;/table&gt; 
  &lt;/form&gt; 
  </code></pre>