How to make BBCODE Enter where cursor is?

I have javascript code for entering BBCODE into the textarea when clicked, but it enters after the text that is already in the textare, and not where the cursor is.

How do I get it to enter where the cursor is?

Here is the javascript code...

<script language="javascript" type="text/javascript">
function AddEmoticon(text) {
	var txtarea = document.form.amout2;
	text = ' ' + text + ' ';
	if (txtarea.createTextRange && txtarea.caretPos) {
		var caretPos = txtarea.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
		txtarea.focus();
	} else {
		txtarea.value  += text;
		txtarea.focus();
	}
}
</script>

Code (markup):

Here is some of the BBCODE and the textarea...

<form name="form" method="post" action="">
  <table width="64%"  border="0" align="center"  cellpadding="0" cellspacing="0" bordercolor=black bgcolor="#000000">
    <tr>
      <td height="33" bordercolor="#000000" class='header' bgcolor="#000000"><p  align="center" class="style4">Send Message</p></td>
    </tr><tr bordercolor="#000000" bgcolor="#000000"> 
      <td height="19" valign="top"><table width="100%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="black" class=thinline>
          <!--DWLayoutTable-->
          <tr>
            <td  height="25" colspan="4" bordercolor="#000000" bgcolor="#000000"><div align="center"><a href="javascript:AddEmoticon(':mad:')"><img src="Smiles/mad.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':lol:')"><img src="Smiles/lol.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':cool:')"><img src="Smiles/bob.gif" width="15" height="15" border="0"></a></div></td>
            <td width="1%" rowspan="2" bordercolor="#000000" bgcolor="#000000" ><a href="javascript:AddEmoticon(':devil:')"></a></td>
          </tr>
          <tr>
            <td  height="25" colspan="4" bordercolor="#000000" bgcolor="#000000"><div align="center"><a href="javascript:AddEmoticon(':evil:')"><img src="Smiles/evil.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':twisted:')"><img src="Smiles/twisted.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':roll:')"><img src="Smiles/roll.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':eek:')"><img src="Smiles/eek.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':redface:')"><img src="Smiles/redface.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':arrow:')"><img src="Smiles/arrow.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':!:')"><img src="Smiles/exclaim.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':?:')"><img src="Smiles/question.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':idea:')"><img src="Smiles/idea.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':mrgreen:')"><img src="Smiles/mrgreen.gif" width="15" height="15" border="0"></a> <a href="javascript:AddEmoticon(':sleep:')"><img src="Smiles/sleep.gif" width="15" height="15" border="0"></a></div></td>
          </tr>
          
          <tr>
            <td width="1%"  height="5" bordercolor="#000000" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp;</td>
            <td colspan="4" bordercolor="#000000" bgcolor="#000000" ><div align="center"><span class="style4"><a href="javascript:AddEmoticon('[b]Text[/b]')"><font color='#3399cc'>Bold</font></a> | </span><span class="style15"><a href="javascript:AddEmoticon('[u]Text[/u]')"><font color="#3399cc">Underline</font></a><span class="style1"> |</span> </span><a href="javascript:AddEmoticon('[i]Text[/i]')" class="style15"><font color="#3399cc">Italic</font></a><span class="style17"> |</span> <a href="javascript:AddEmoticon(' [img]IMAGE URL[/img] ')" class="style15"><font color="#3399cc">Image</font></a> <span class="style4">| </span><a href="javascript:AddEmoticon(' [color=(COLOUR HERE)]TEXT[/color] ')" class="style15"><font color="#3399cc">Colour</font></a></div></td>
          </tr>
          <tr>
            <td  height="5" bordercolor="#000000" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp;</td>
            <td width="32%" bordercolor="#000000" bgcolor="#000000" ><!--DWLayoutEmptyCell-->&nbsp;</td>
            <td width="4%" bordercolor="#000000" bgcolor="#000000" ><div align="left"> <span class="style4">To:</span>
              <input name="kill_username" type="text" id="kill_username3" value='' size="30" class=textbox></div>
<br />
<div align="left"> <span class="style4">Subject:</span>
              <input name="subject" type="text" id="subject" value='No Subject' size="30" class=textbox></div></td>
            <td width="62%" bordercolor="#000000" bgcolor="#000000" ><div align="right">
            </div></td>
            <td bordercolor="#000000" bgcolor="#000000" >&nbsp;</td>
          </tr>
          <tr> 
            <td colspan="4" bordercolor="#000000" bgcolor="#000000" ><div align="center">
              <textarea name="amout2" class="tableborder2" cols="60" rows="10" type="text" id="amout2"></textarea>
            </div></td>
          </tr>
          <tr>
            <td  height="5" colspan="5" bordercolor="#000000" bgcolor="#000000">
              
              <div align="center">
                <input name="Send" type="submit" class="custombutton" id="Send" value="Send">
            </div></td>
          </tr>
          
          
      </table>

Code (markup):

Thanks in advance

 

Hi CuBz,
maybe this page may help you. Do you store somewhere caretPos property for the textarea?

 

That's nothing to do with what i need

 

There is exactly the same code as you provided (just different variable names)... So, still nothing?
The point is that property "caretPos" is not a standard one, so you have to declare it yourself somewhere, like in the example I linked to. If you say that it always adds the text at the end of the textarea, it means most likely that txtarea.caretPos is not defined...