Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript button to but text into a textarea

Posted on 2004-04-16
7
Medium Priority
?
777 Views
Last Modified: 2008-02-26
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
0
Comment
Question by:KArrowsmith
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 3

Expert Comment

by:azcn2503
ID: 10840715
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.
0
 
LVL 3

Expert Comment

by:azcn2503
ID: 10840848
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>
0
 

Author Comment

by:KArrowsmith
ID: 10840897
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.
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 3

Expert Comment

by:azcn2503
ID: 10841402
There's always a way.
0
 
LVL 6

Accepted Solution

by:
Lord_McFly earned 300 total points
ID: 10848759
Mentioned above was the problem of ensuring that the closing tags followed in the correct order. The following code has a tag button b,i,img etc and a button which is used for closing the tags. Stored is the correct closing tag so if you click...

[b][i][s] for example the closing tag button is display [/s], then [/i] ans then [/b] - this ensures that you tags all closed in the correct order - it doesn't matter how many tags you open the closing tag button will always have the correct closing tag ready.

Have a go - see what you think.

<html>
<head>
<title>Tags</title>
<script language="JavaScript">
<!--
function DoTag(Action, Tag)
      {
            var content = document.Tags.f_0.value
            var closing = document.Tags.Closing.value
            
            if(Action==0)
                  {
                        content = content + "[" + Tag + "]";
                        document.Tags.f_0.value = content;
                        
                        closing = "[/" + Tag + "] " + closing;
                        document.Tags.Closing.value = closing;
                        document.Tags.Close.value = "[/" + Tag + "]";
                        
                        document.Tags.f_0.focus();
                  }
            else
                  {
                        closing = closing.substr(0,closing.length-1);
                        
                        var tags = closing.split(" ");
                        var items = tags.length - 1;
                        var i
                        
                        content = content + tags[0];
                        document.Tags.f_0.value = content;

                        if(items >0)
                              {
                                    closing = "";
                                    
                                    for(i=0; i< items; i++)
                                          {
                                                closing = closing + tags[i+1] + " ";
                                          }
                                    
                                    document.Tags.Closing.value = closing;
                                    document.Tags.Close.value = tags[1];
                              }
                        else
                              {
                                    document.Tags.Closing.value = ""
                                    document.Tags.Close.value = ""
                              }

                        document.Tags.f_0.focus();
                  }
      }
//-->
</script>
</head>
<body>
<form name="Tags" method="post" action="Tags.htm">
      <textarea name="f_0" style="WIDTH: 300px; HEIGHT: 200px"></textarea><br>
      <input type="button" name="Button" value="b" OnClick="DoTag(0,'b'); return false">
      <input type="button" name="Button" value="i" OnClick="DoTag(0,'i')">
      <input type="button" name="Button" value="u" OnClick="DoTag(0,'u')">
      <input type="button" name="Button" value="s" OnClick="DoTag(0,'s')">
      <input type="button" name="Button" value="img" OnClick="DoTag(0,'img')">
      <input type="button" name="Button" value="url" OnClick="DoTag(0,'url')">
      <input type="button" name="Close" value="" onClick="DoTag(1,this)">
      <input type="hidden" name="Closing" value="">
 </body>
</html>
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10885482
Do you need any more assistance on this question?
0
 

Author Comment

by:KArrowsmith
ID: 10887076
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
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question