inserting tags in many textareaS

[dotJoon]

<script type='text/javascript'> 
<!-- 

function ubbc(open, end){ 
    var tArea = document.myform.box1; 
    var isIE = (document.all)? true : false; 
    var open = (open)? open : ""; 
    var end = (end)? end : ""; 

    if(isIE){ 
        tArea.focus(); 
        var curSelect = document.selection.createRange(); 
        if(arguments[2]){ 
            curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
        } else { 
            curSelect.text = open + curSelect.text + end; 
        } 
    } else if(!isIE && typeof tArea.selectionStart != "undefined"){ 
        var selStart = tArea.value.substr(0, tArea.selectionStart); 
        var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
        var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
        if(arguments[2]){ 
            tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
        } else { 
            tArea.value = selStart + open + curSelection + end + selEnd; 
        } 
    } else { 
        tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
    } 
} 

//--> 
</script> 

<form name="myform" action='action.cfm'> 

  <textarea name='box1' cols='88' rows='3'></textarea> 
  <input type='button' value='Bold' onclick="ubbc('<b>', '</b>')" /> 
  <input type='button' value='BR' onclick="ubbc('<br>')" /> 
 
</form>

If a user clicks the button "Bold" or "BR with the code above,"
"<b>,</b>" or "<br>" tag will be generated in the textArea.



Let's suppose I have many textAreas in the form.

I like to make "Bold" and "BR" buttons at each textArea.

The following is one of my trial codes, and it doesn't work correctly.

trial code

<script type='text/javascript'> 
<!-- 

function ubbc(open, end){ 
    var tArea = document.myform.box1; 
    var isIE = (document.all)? true : false; 
    var open = (open)? open : ""; 
    var end = (end)? end : ""; 

    if(isIE){ 
        tArea.focus(); 
        var curSelect = document.selection.createRange(); 
        if(arguments[2]){ 
            curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
        } else { 
            curSelect.text = open + curSelect.text + end; 
        } 
    } else if(!isIE && typeof tArea.selectionStart != "undefined"){ 
        var selStart = tArea.value.substr(0, tArea.selectionStart); 
        var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
        var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
        if(arguments[2]){ 
            tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
        } else { 
            tArea.value = selStart + open + curSelection + end + selEnd; 
        } 
    } else { 
        tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
    } 
} 

//--> 
</script> 

<form name="myform" action='action.cfm'> 

  <textarea name='box1' cols='88' rows='3'></textarea> 
  <input type='button' value='Bold' onclick="ubbc('<b>', '</b>')" /> 
  <input type='button' value='BR' onclick="ubbc('<br>')" /> 

  <textarea name='box2' cols='88' rows='3'></textarea> 
  <input type='button' value='Bold' onclick="ubbc('<b>', '</b>')" /> 
  <input type='button' value='BR' onclick="ubbc('<br>')" /> 

  <textarea name='box3' cols='88' rows='3'></textarea> 
  <input type='button' value='Bold' onclick="ubbc('<b>', '</b>')" /> 
  <input type='button' value='BR' onclick="ubbc('<br>')" /> 
 
</form>

How can I make the trial code work?

[jimfraser]

You need a unique way to identify the textarea that the button belongs to.

There are many ways to do this, one is like this:

function ubbc(btn, open, end){ 
  var theTextArea = btn.parentNode.getElementsByTagName("textarea")[0];
  // now you have a reference to the textarea to which the button corresponds
  // more code
}

...

<div>
<textarea name='box1' cols='88' rows='3'></textarea> 
<input type='button' value='Bold' onclick="ubbc(this,'<b>', '</b>')" /> 
<input type='button' value='BR' onclick="ubbc(this,'<br>')" /> 
</div>