Add some text to textarea

Hi All,

I believe this is a very common issue in creating guestbooks and customizing it…
I want to add a code for a smiley into a textarea when a smiley image is clicked :


<textarea name="comment" rows="4" cols="20" wrap="virtual"></textarea>
<a href="#"><img src="images/banana.gif" border="0px" width="30px" onClick="" /></a>
<input type="submit" value="Send" name="send_comment" />

When a user clicks on the image banana.gif, I want the javascript to add the word ‘banana’ to the contents of the textarea. I found some examples on the forums, but no one worked for me… :confused:
Can someone help?
Thank you advanced!
:smiley:

Hi again!

I was trying to solve the problem and found this script (it supposed to do what I need) :


<script type="text/javascript"> 
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
</script> 


I inserted it at the HEAD section and then :


<input type="image" style="width:30px" src="images/banana.gif" value="banana" onclick="insertAtCursor(document.comments_form.comment, 'banana')" />

BUT, instead to insert the word ‘banana’ at the cursor, it deletes all the content inside the textarea… (for a moment, the word banana is inserted, but after that everything is gone…)

Any help is appreciated!

I don’t know in which browser you tested it, but in FF3.5.x, IE8, IE7 and in Chrome it just works perfectly fine.


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="1012904284" />
	<title>Test</title>
	<script type="text/javascript"> 
		function insertAtCursor(myField, myValue) {
			if (document.selection) {//IE support
				myField.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
			}
			else if (myField.selectionStart || myField.selectionStart == '0') {//MOZILLA/NETSCAPE support
				var startPos = myField.selectionStart;
				var endPos = myField.selectionEnd;
				myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
			} else {
				myField.value += myValue;
			}
			return false;
		}
	</script>
</head>

<body>
<form name="comments_form" id="comments_form" method="post" action="">
	<textarea name="comment" rows="4" cols="20" wrap="virtual"></textarea>
	<a href="javascript:;" onclick="insertAtCursor(document.comments_form.comment, ':banana:');">Banana</a>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
      html {font:81.25&#37;/1.5 Verdana,sans-serif}
    </style>
  </head>
  <body>
    <form action="#">
      <div>
        <textarea name="comment" rows="4" cols="20" id="comment"></textarea>
        <a href="#" id="banana"><img src="images/banana.gif" alt="Banana"></a>
        <input type="submit" value="Send">
      </div>
    </form>

    <script type="text/javascript">
      (function () {
          var a = document.getElementById("banana");
          if (a) {
              a.onclick = function () {
                  var t = document.getElementById("comment");
                  t.value += " banana";
                  return false;
              };
          }
       })();
    </script>
  </body>
</html>

I changed the input type from button to an ‘ordinary’ <a href> and now it’s working perfectly. However I’m not sure if that was the real reason… :smiley:

It seems like Tommy’s script is the best example out of all and it’s (cross browser compatiable).

This does not insert the word " banana" in the cursor location what OP needs but the way of using events and adding functions is the good one. If OP wants to implement his code in this way then see the something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
      html {font:81.25%/1.5 Verdana,sans-serif}
    </style>
  </head>
  <body>
    <form action="" method="post" name="frm1" id="frm1">
      <div>
        <textarea name="comment" rows="4" cols="20" id="comment"></textarea>
        <a href="#" id="banana"><img src="images/banana.gif" alt="Banana" /></a>
        <input type="submit" value="Send">
      </div>
    </form>

    <script type="text/javascript">
      (function () {
          var a = document.getElementById("banana");
          var myValue = ':banana:';
          if (a) {
              a.onclick = function () {
            	var myField = document.getElementById("comment");
                  if (document.selection) {//IE support
	                myField.focus();
	                sel = document.selection.createRange();
	                sel.text = myValue;
	            }
	            else if (myField.selectionStart || myField.selectionStart == '0') {//MOZILLA/NETSCAPE support
	                var startPos = myField.selectionStart;
	                var endPos = myField.selectionEnd;
	                myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
	            } else {
	                myField.value += myValue;
	            }
	            return false;
              };
          }
       })();
    </script>
  </body>
</html>

No, it doesn’t, but I didn’t see that requirement in the OP’s post:

(Emphasis mine).
I interpreted ‘add’ as ‘append’.