Textarea - add text

[Guest FirefoxRocks]

I have this script that adds text to the text box:

function mywrite(){document.getElementById('txt1').value = (document.getElementById('button1').value);}

My form is like this:

<form action="" method="get"><input type="button" id="button1" value="Cats" onclick="mywrite()" /><input type="button" id="button2" value="Dogs" onclick="mywrite()" /><input type="button" id="button3" value="Fish" onclick="mywrite()" /><textarea id="txt1" name="txt1"></textarea><input type="reset" value="Clear" /></form>

Now obviously when clicked on each one of the buttons it will say Cats because the function is grabbing the value of button1, which is Cats. How do I make it that it grabs the value of the button that was clicked on? I have tried different function names but that didn't work. It took me a while to figure out that mywrite() is the ONLY function name that worked :)Could you give like an example or something?

[PrateekSaxena]

The JS function -

function mywrite(id){document.getElementById('txt1').value = (document.getElementById(id).value);}

The Form

<form action="" method="get"><input type="button" id="button1" value="Cats" onclick="mywrite(this.id)" /><input type="button" id="button2" value="Dogs" onclick="mywrite(this.id)" /><input type="button" id="button3" value="Fish" onclick="mywrite(this.id)" /><textarea id="txt1" name="txt1"></textarea><input type="reset" value="Clear" /></form>

Does it work?

[aspnetguy]

or

function mywrite(btn){document.getElementById('txt1').value = (btn.value);}

<form action="" method="get"><input type="button" id="button1" value="Cats" onclick="mywrite(this)" /><input type="button" id="button2" value="Dogs" onclick="mywrite(this)" /><input type="button" id="button3" value="Fish" onclick="mywrite(this)" /><textarea id="txt1" name="txt1"></textarea><input type="reset" value="Clear" /></form>

[PrateekSaxena]

Obbviously the second one is better, smaller and more optimized!!

[Guest FirefoxRocks]

Ok, thanks for that.Now how do I get the button to insert something OTHER than it's own value?You can't use < in the id attribute or the name attribute, so I don't know what else can you store the information in.I need it to insert a string of text, not a single word.

[PrateekSaxena]

you can probably have a two dimensioan array that contains the button's ID and the appropriate string value. Then you ca just match with the string and then change the value of the textarea

[jesh]

Or something like this?

function mywrite(somestring){	document.getElementById('txt1').value = somestring;}

<form action="" method="get"><input type="button" id="button1" value="Cats" onclick="mywrite('This is some message for cats!')" /><input type="button" id="button2" value="Dogs" onclick="mywrite('This is some message for dogs!')" /><input type="button" id="button3" value="Fish" onclick="mywrite('This is some message for fish!')" /><textarea id="txt1" name="txt1"></textarea><input type="reset" value="Clear" /></form>

[Guest FirefoxRocks]

That worked. Thank you.Now I need something a little more advanced.Instead of changing the value of the text box, I need some text to ADD at the caret position of the text box. Like when I click the B,I,U buttons above it adds the text at the caret position of this box I am typing in.So onclick Add text to text box is what I need. It will make my application so much easier!

[PrateekSaxena]

Cant you use iframes?

[Guest FirefoxRocks]

Would that help? And no I can't use iframes because I am sending the pages through application/xhtml+xml with XHTML 1.1 which does not permit the use of iframes.

[PrateekSaxena]

that is right

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by: * incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), * by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead). * by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

Is there a reason why you need to maintain XHTML. Do one thing write a function onload that would make the ifram at runtime!!

[vytas]

I made a script that added to a textarea.maybe this will help:

<script type="text/javascript">function addText(){var atxt = document.getElementById('txt1').value;document.getElementById('txt1').value=atxt+"[b] [/b]";}</script>

didn't test it yet let me now if it works.

[vytas]

edit: I posted double, srry for that..

[PrateekSaxena]

Or try this -

onload = loadIt;function loadIt(){var ifr = document.createElement("iframe");ifr.id = "myiframe";document.body.appendChild(ifr)}

[vytas]

Huh it whas about adding text to a textarea right ?

[Guest FirefoxRocks]

I made a script that added to a textarea.maybe this will help:

<script type="text/javascript">function addText(){var atxt = document.getElementById('txt1').value;document.getElementById('txt1').value=atxt+"[b] [/b]";}</script>

didn't test it yet let me now if it works.

I have modified your code a little from the previous experience (in the topic ) and came up with this:

<script type="text/javascript"><!--//--><![CDATA[//><!--function addText(somestring)	{	var atxt = document.getElementById('txt1').value;	document.getElementById('txt1').value=atxt+somestring;	}function mywrite(somestring)	{	document.getElementById('txt1').value = somestring;	}function changeRows()  {  document.getElementById('txt2').rows=document.getElementById('change2').value;  }//--><!]]></script>

It includes old code for older unchanged buttons (which I will change later), the changeRows() of the textarea and the new code. It needs "somestring" to work.One last problem, it would be extremely helpful for the "somestring" to be inserted at the caret position, not the end of the value. How do I do that?

[vytas]

Well i am not that good in English, so what does caret mean? current ?

[Guest FirefoxRocks]

caret - The position of the mouse cursor in a specific area.

[jesh]

I didn't read through this person's blog, but it looks like it'll get you headed in the right direction for determining the cursor position in a textarea:http://weblogs.asp.net/skillet/archive/200.../24/395838.aspx

[Guest FirefoxRocks]

That only works for Internet Explorer unfortunately.

[jesh]

That only works for Internet Explorer unfortunately.

Hmm, I don't know how to return the caret position in IE, but this works to insert data at the caret position (whatever that may be) in IE and Firefox:

<html><body><textarea id="myTextarea"></textarea><button onclick="newcontent();">New Content</button><script>function newcontent(){	var textarea = document.getElementById("myTextarea");	if(document.selection) // IE Code	{		textarea.focus();		var range = document.selection.createRange();		range.text = "NEW CONTENT";	}	else  // DOM Code	{		var pos = textarea.selectionStart;		var beginText = textarea.value.substring(0, pos);		var endText = textarea.value.substr(pos);		textarea.value = beginText + "NEW CONTENT" + endText;	}}</script></body></html>