Word Count For New Posts?

[SBlueman]

I am trying to add this script to my site which will allow my members to calculate their word count in each post:


From This Site (http://www.a1javascripts.com/utilities/wordcount/wordcount.html)
<form method="POST" name="wordcount">
<script language="JavaScript">

function countit(){

/*Word count script
Carl Dimmer
*/

var formcontent=document.wordcount.wordcount2.value
formcontent=formcontent.split(" ")
document.wordcount.wordcount3.value=formcontent.le ngth
}
</script>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><textarea rows="12" name="wordcount2" cols="60" wrap="virtual"></textarea></td>
</tr>
<tr>
<td width="100%"><div align="right"><p><input type="button" value="Calculate Words"
onClick="countit()"> <input type="text" name="wordcount3" size="20"></p>
<div align="center"><center><p><font face="arial" size="-2">
</tr>
</table>
</form>

Is there a way to get this to work with vBulletin? I am using 3.6.8 right now.

--------------- Added 1236058332 at 1236058332 ---------------

UPdate:

Using this code gives me the right "look" when I edit my "editor_toolbar_on" template

$vBeditTemplate[clientscript]

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="$editorid" class="vBulletin_editor" width="100%">
<div id="{$editorid}_controls" class="controlbar">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><img src="$stylevar[imgdir_editor]/removeformat.gif" width="21" height="20" alt="$vbphrase[remove_text_formatting]" /></div></td>
<if condition="$show['font_bbcode'] OR $show['size_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['font_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['size_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontsize" title="$vbphrase[sizes]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_size_out" style="width:25px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['color_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['wysiwygsmilies']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_smilie" title="$vbphrase[smilies]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_editor]/smilie.gif" alt="" width="21" height="20" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['attach']">
<td><div class="imagebutton" id="{$editorid}_popup_attach" title="$vbphrase[attachments]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_editor]/attach.gif" alt="" width="21" height="20" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<!--
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_cut"><img src="$stylevar[imgdir_editor]/cut.gif" width="21" height="20" alt="$vbphrase[cut]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_copy"><img src="$stylevar[imgdir_editor]/copy.gif" width="21" height="20" alt="$vbphrase[copy]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_paste"><img src="$stylevar[imgdir_editor]/paste.gif" width="21" height="20" alt="$vbphrase[paste]" /></div></td>
-->
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_undo"><img src="$stylevar[imgdir_editor]/undo.gif" width="21" height="20" alt="$vbphrase[undo]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_redo"><img src="$stylevar[imgdir_editor]/redo.gif" width="21" height="20" alt="$vbphrase[redo]" /></div></td>
<td width="100%">&nbsp;</td>
<if condition="is_browser('ie') AND !is_browser('mac')">
<td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="$stylevar[imgdir_editor]/spelling.gif" width="21" height="20" alt="$vbphrase[check_spelling]" /></div></td>
</if>
<td>
<div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><img src="$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" /></div>
<div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><img src="$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" /></div>
</td>
<if condition="$show['wysiwyg_compatible']">
<td><div class="imagebutton" id="{$editorid}_cmd_switchmode"><img src="$stylevar[imgdir_editor]/switchmode.gif" width="21" height="20" alt="$vbphrase[switch_editor_mode]" /></div></td>
</if>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<if condition="$show['basic_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" /></div></td>
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['align_bbcode']">
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
</if>
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['list_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertorderedlist"><img src="$stylevar[imgdir_editor]/insertorderedlist.gif" width="21" height="20" alt="$vbphrase[ordered_list]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertunorderedlist"><img src="$stylevar[imgdir_editor]/insertunorderedlist.gif" width="21" height="20" alt="$vbphrase[unordered_list]" /></div></td>
</if>
<if condition="$show['align_bbcode'] OR $show['list_bbcode']">
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
</if>
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['url_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_unlink"><img src="$stylevar[imgdir_editor]/unlink.gif" width="21" height="20" alt="$vbphrase[remove_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_email"><img src="$stylevar[imgdir_editor]/email.gif" width="21" height="20" alt="$vbphrase[insert_email_link]" /></div></td>
</if>
<if condition="$show['img_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>
</if>
<if condition="$show['quote_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" /></div></td>
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['code_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><img src="$stylevar[imgdir_editor]/code.gif" width="21" height="20" alt="$vbphrase[wrap_code_tags]" /></div></td>
</if>
<if condition="$show['html_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_html"><img src="$stylevar[imgdir_editor]/html.gif" width="21" height="20" alt="$vbphrase[wrap_html_tags]" /></div></td>
</if>
<if condition="$show['php_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="$stylevar[imgdir_editor]/php.gif" width="21" height="20" alt="$vbphrase[wrap_php_tags]" /></div></td>
</if>
<!-- AnyMedia BBCode By Crist Chsu Start -->
<if condition="$show['anymedia_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_{$vboptions[anymediatag]}"><img src="$stylevar[imgdir_editor]/media.gif" width="21" height="20" alt="$vbphrase[wrap_media_tags]" /></div></td>
</if>
<!-- AnyMedia BBCode By Crist Chsu End -->
$vBeditTemplate[extrabuttons]
</tr>
</table>
</div>

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td class="controlbar">
<form method="POST" name="wordcount">
<script language="JavaScript">

function countit(){

/*Word count script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

var formcontent=document.wordcount.wordcount2.value
formcontent=formcontent.split(" ")
document.wordcount.wordcount3.value=formcontent.le ngth
}
</script>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea></td>
</tr>
<tr>
<td width="100%"><div align="right"><p><input type="button" value="Calculate Words"
onClick="countit()"> <input type="text" name="wordcount3" size="20"></p>
<div align="center"><center><p><font face="arial" size="-2">This free script provided by</font>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</center></div></div></td>
</tr>
</table>
</form>
</td>
<if condition="$smiliebox"><td class="controlbar">$smiliebox</td></if>
</tr>
</table>
</td>
</tr>
</table>

<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />

<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie', undefined, '$ajax_extra');
//-->
</script>

But it still is not calculating the words. Any suggestions?

[Dismounted]

So you're looking to count them in the QR and Reply boxes? Or are you talking about on displayed posts themselves?

[SBlueman]

I was looking to have this show up in the new thread template.

I actually got this to work and am sharing it in case anyone wants to use it:

Step 1: Open "editor_toolbar_on" template
Step 2: Find <textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea>

Step 3: After, add:<script language="JavaScript">
function countit(){
var formcontent=document.vbform.{$editorid}_textarea.v alue
formcontent=formcontent.split(" ")
document.vbform.wordcount3.value=formcontent.lengt h
}
</script>
<input type="button" value="Calculate Words" onClick="countit()">
<input type="text" name="wordcount3" size="20">

Works like a charm for what I needed! Now members can check how many words they have posted before submitting a new post or thread.