View Full Version : Changing Tags in another Textarea

05-23-2012, 10:53 AM
I have a script that will add tags to another text area :

function formatText(el_from, el_to, tag) {
var selectedText = document.selection ? document.selection.createRange().text : el_from.value.substring(el_from.selectionStart, el_from.selectionEnd);
// IE:Moz
if (selectedText == "") {
return false;
var newText='#28\''+tag+'\''+selectedText+'#28\''+tag+'\'';

el_to.value = el_from.value.substring(0, el_from.selectionStart) + newText + el_from.value.substring(el_from.selectionEnd, el_from.value.length);

It does exactly that, but when I make a new selection it over writes the previous changes, no matter where the selection is made. It is called by:

<div class="buttons">
<button type="button" value="D" onclick="formatText(message_text,message,'D')" class="blue" /><img src="images/default.png" />
<button type="button" value="B" onclick="formatText(message_text,message,'B')" class="blue" /><img src="images/bold.png" />
<button type="button" value="E" onclick="formatText(message_text,message,'E')" class="blue" /><img src="images/enlarge.png"/>
<button type="button" value="F" onclick="formatText(message_text,message,'F')" class="blue" /><img src="images/bulb.png"/>
<button type="button" value="1" name="show_time" class="blue" /><img src="images/clock.png"/>
<button type="button" value="1" name="show_temp" class="negative" /><img src="images/temp.png"/>
<textarea rows="4" id="message_text" name="message_text" style="direction:ltr;" onkeyup="copy_data(this);" /><?php echo $page['message_text']; ?></textarea>

<!-- PAGE MESSAGE WITH FORMATTING i.e. #28'D' etc -->
<textarea rows="4" id="message" name="message" disabled style="direction:ltr;" /><?php echo $page['message']; ?></textarea>

And the copying happens with this script:

function copy_data(val){
var messageText = document.getElementById(val.id).value
document.getElementById('message').innerHTML = messageText;

SO essentially what needs to happen is when a pice of text is selected in "message_text" :
this is the Selected Text part ...
the top script will add the tags to the bold area as such:

this is the <whatever>Selected Text<whatever> part
But when I then make a new selection:
this is the selected text part ...
the last <whatever> will dissappear all together and onyl the "part" will now have tags.

Can someone help me get this working correctly, in other words it should now display as:

this is the<whatever>selected text<whatever><whatever>part<whatever>