asked on

Javascript button to but text into a textarea

Im creating a form with a textarea and have buttons that i want the user to be able to click on and it will put an open tag and then second click put a close tag which will be used to format the text.

I currently have:

tags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[img]','[/img]','[url]','[/url]');
var click = 0;

function addtag(which) {
      if ( click == 0 ){
            click = 1;
            val = document.post.message.value;
            document.post.message.value += tags[which];
      } else {
            click = 0;
            val = document.post.message.value;
            document.post.message.value += tags[which + 1];
      }
}

This does that but i have more than one button which run the same function so i could start 1 tag but close with a totaly different tag.

There must be a way of doing it with 1 function rather than having a seperate function for each button.
I would also like the text to insert to where the mouse pointer is in the text area and not at the end and possibly some sort of validation so the tags go in order and they dont open 1 and then a 2nd but close the 1st one first and the 2nd last

azcn2503

I did something like this.... I did it using a for{} loop and detecting a carried variable in a function. I had exactly your problem, in every sense. I'll get my head down later... I need to prepare for my girlfriend's arrival.

azcn2503

Here's all I came up with when waiting for my hot water to actually get hot for me to have a bath... It just happens to be a very long winded method of what you have already. but it's a different method. All the button values come from an array which can be added to real easily, as soon as you add a few characters in the array the buttons change (anothero one appears and all the formatting applies to it)... Anyway, here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Aaron Cunnington" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
tagsA=new Array("b","i","u","s","img","url")
function formatMessage(formatButtonID,formatButtonValue){
for(i=0;i<=tagsA.length-1;i++){
if(formatButtonValue=="["+tagsA[i]+"]"||formatButtonValue=="[\/"+tagsA[i]+"]"){
if(formatButtonValue.substr(1,formatButtonValue.length-2)==tagsA[i]){
document.getElementById("message").setAttribute("innerText",document.getElementById("message").getAttribute("value")+formatButtonValue);
document.getElementById("message").focus();
formatButtonValue="[\/"+formatButtonValue.substr(1,formatButtonValue.length-2)+"]";
document.getElementById(formatButtonID).setAttribute("value",formatButtonValue);
}
else{
document.getElementById("message").setAttribute("innerText",document.getElementById("message").getAttribute("value")+formatButtonValue);
document.getElementById("message").focus();
formatButtonValue="["+formatButtonValue.substr(2,formatButtonValue.length-3)+"]";
document.getElementById(formatButtonID).setAttribute("value",formatButtonValue)
}
}
}
}
</script>
</head>
<body>
<textarea style="width:300px;height:200px;font-family:Lucida Sans;font-size:10px;" id="message"></textarea><br />
<script type="text/javascript">
for(i=0;i<tagsA.length;i++){
document.write("<input type=\"button\" id=\"formatButton_"+tagsA[i]+"\" value=\"["+tagsA[i]+"]\""
+" onclick=\"formatMessage(this.id,this.value);\" \/>");
}
</script>
</body>
</html>

KArrowsmith

ASKER

that sorts out the first problem of opening and closing the tags independently of each other but it places the new tag at the end of the text in the textarea rather than at the position where the mouse pointer is and also you can open the first tag and then the second but it allows you to close them in a incorrect order. I imagine validating the order would make the script very long.

azcn2503

There's always a way.

ASKER CERTIFIED SOLUTION

Lord_McFly

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lord_McFly

Do you need any more assistance on this question?

KArrowsmith

ASKER

No sure just yet, been working on another section of the site. I found another script somewhere and now have 3 scripts that each do a different point, one to make sure the right closing tag is put it according to the button, one to check the tags are in a valid order and another which puts text at the places of the mouse pointer