BBcode non funzionano quando clicco su "invia" della textarea

Salve, allora sto creando un piccolo sistema per inviare i commenti nel mio sito internet e volevo inserire nel textarea anche la possibilità di mettere i bbcode.

Il problema è questo: quando clicco sui bottoni dei bbcode me li riporta nel textarea, solo che nel momento in cui scrivo qualsiasi cosa nel textarea, i bbcode non funzionano più, cioè quando clicco non mi riporta nulla.
Sapreste dirmi dove sbaglio?

Ecco il codice :

<input type="button" value="link" onclick="document.theform.commento.innerHTML+='[a][/a]'">
<input type="button" value="codice" onclick="document.theform.commento.innerHTML+='[code][/code]'">
<input type="button" value="grassetto" onclick="document.theform.commento.innerHTML+='[b][/b]'">
<input type="button" value="corsivo" onclick="document.theform.commento.innerHTML+='[i][/i]'">
<form method="post" action="#" name="theform">
<input type="hidden" value="<?echo $id;?>" name="idart" >
<input type="hidden" value="<?echo $titolo;?>" name="titart">
Email :<input type="text" value="" name="email"> <br>
Commento:<br><textarea rows=13 cols=60 name="commento"></textarea><br>
<input type="submit" value="Inserisci">
</form>

bottone o immagine

 <img alt="Allienamento a sinistra" src="http://forum.it.altervista.org/images/bb/sn.bmp" value="left"  onclick="storeCaret('left')"> 

bbcode

var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1) ? true : false;
var regexp = new RegExp("[\r]","gi");

function storeCaret(selec)
{
    if (isMozilla)
    {
    // Si on est sur Mozilla

        oField = document.forms['news'].elements['newst'];

        objectValue = oField.value;

        deb = oField.selectionStart;
        fin = oField.selectionEnd;

        objectValueDeb = objectValue.substring( 0 , oField.selectionStart );
        objectValueFin = objectValue.substring( oField.selectionEnd , oField.textLength );
        objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );

    //    alert("Debut:'"+objectValueDeb+"' ("+deb+")\nFin:'"+objectValueFin+"' ("+fin+")\n\nSelectionné:'"+objectSelected+"'("+(fin-deb)+")");

        oField.value = objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]" + objectValueFin;
        oField.selectionStart = strlen(objectValueDeb);
        oField.selectionEnd = strlen(objectValueDeb + "[" + selec + "]" + objectSelected + "[/" + selec + "]");
        oField.focus();
        oField.setSelectionRange(
            objectValueDeb.length + selec.length + 2,
            objectValueDeb.length + selec.length + 2);
    }
    else
    {
    // Si on est sur IE

        oField = document.forms['news'].elements['newst'];
        var str = document.selection.createRange().text;

        if (str.length>0)
        {
        // Si on a selectionné du texte
            var sel = document.selection.createRange();
            sel.text = "[" + selec + "]" + str + "[/" + selec + "]";
            sel.collapse();
            sel.select();
        }
        else
        {
            oField.focus(oField.caretPos);
        //    alert(oField.caretPos+"\n"+oField.value.length+"\n")
            oField.focus(oField.value.length);
            oField.caretPos = document.selection.createRange().duplicate();

            var bidon = "%~%";
            var orig = oField.value;
            oField.caretPos.text = bidon;
            var i = oField.value.search(bidon);
            oField.value = orig.substr(0,i) + "[" + selec + "][/" + selec + "]" + orig.substr(i, oField.value.length);
            var r = 0;
            for(n = 0; n < i; n++)
            {if(regexp.test(oField.value.substr(n,2)) == true){r++;}};
            pos = i + 2 + selec.length - r;
            //placer(document.forms['news'].elements['newst'], pos);
            var r = oField.createTextRange();
            r.moveStart('character', pos);
            r.collapse();
            r.select();

        }
    }
} 

se non funziona:
prova qui...