JavaScript Forum

**dan245** · 03-21-2005, 06:52 PM

Is it possible to write text to a textarea from document.write()?

**Christopher** · 03-21-2005, 07:35 PM

No, you just alter the value of the textarea (see here for some more info on the textarea object).

For example:

HTML Code:

<!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>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
        function fillTextarea(num)
        {
            if(!num || num < 1 || num > 4)
                num = 1;

            textarea = eval('document.myform.textarea' + num);

            switch(num)
            {
                case 1:
                    textarea.value = "This";
                    break;
                
                case 2:
                    textarea.value = "is";
                    break;
                
                case 3:
                    textarea.value = "a";
                    break;
                
                case 4:
                    textarea.value = "test.";
                    break;
            }
        }
    </script>
</head>
<body>

<form name="myform">

<textarea name="textarea1"></textarea><br />
<input type="button" onclick="fillTextarea(1)" value="Fill" />

<br /><br />

<textarea name="textarea2"></textarea><br />
<input type="button" onclick="fillTextarea(2)" value="Fill" />

<br /><br />

<textarea name="textarea3"></textarea><br />
<input type="button" onclick="fillTextarea(3)" value="Fill" />

<br /><br />

<textarea name="textarea4"></textarea><br />
<input type="button" onclick="fillTextarea(4)" value="Fill" />

</form>

</body>
</html>

**dan245** · 03-21-2005, 08:47 PM

cool, thank you chroder!

**dan245** · 03-21-2005, 08:52 PM

Oh, I also forgot to ask, I can only add 1 word in each textarea, is there a way to add the same word by clicking the same button?

**Christopher** · 03-21-2005, 09:23 PM

Like this?

HTML Code:

<!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>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
        function fillTextarea(txt, name, min, max)
        {
            for(var i = min; i <= max; i++)
            {
                textarea = eval("document.myform." + name + i);

                if(!textarea)
                    continue;
                
                textarea.value = txt;
            }
        }
    </script>
</head>
<body>

<form name="myform">

<textarea name="textarea1"></textarea><br />
<textarea name="textarea2"></textarea><br />
<textarea name="textarea3"></textarea><br />
<textarea name="textarea4"></textarea><br />
<textarea name="textarea5"></textarea><br />
<textarea name="textarea6"></textarea><br />
<textarea name="textarea7"></textarea><br />
<textarea name="textarea8"></textarea><br />

<input type="button" onclick="fillTextarea('This is my string.', 'textarea', 1, 8)" value="Fill All" />

</form>

</body>
</html>

This is just a modified version, taking four arugments

txt - The string you want to fill the textareas with.
name - The textarea names without the number (ie. if you had "description1" to "description8", the name without the number would be simply "description")
min - The minimum number suffix added to the name (in the above example, 1)
max - The maximum number suffix added to the name (in the above example, 8)

**dk01** · 03-21-2005, 10:04 PM

Code:

<!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>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
        function fillTextarea(textareaId, txt)
        {
            document.getElementById(textareaId).value = document.getElementById(textareaId).value + txt;
        }
    </script>
</head>
<body>

<form name="myform">
<textarea id="textarea1"></textarea><br />
<input type="button" onclick="fillTextarea('textarea1','Repeat this. ')" value="Fill" />
<input type="button" onclick="fillTextarea('textarea1','Blah. ')" value="Fill" />
</form>

</body>
</html>

This is what you are looking for. You can have different buttons for different words too.

**bunker** · 03-22-2005, 07:57 AM

Hey, I was just looking for such solution for my site. Thanks.

**dan245** · 03-22-2005, 02:11 PM

Cool, thank you soo much!!

**dan245** · 03-22-2005, 05:11 PM

another question again!

I want to make a link be displayed when I click the button...

Code:

<!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>
    
<title>Test</title>
    
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
<script type="text/javascript">

function hyperLink(textareaId, txt)

{

var linkname = prompt ( "Please Specify the name of your link..." );

var link = prompt ( "Please specify the location of the link..." );

document.getElementById(textareaId).value = document.getElementById(textareaId).value + txt;        

}
    
</script>

</head>
<body>

<form name="myform">

<input type="button" value="Create Hyperlink" onclick="hyperLink('myeditor','<a href=link>linkname</a>')">

<br />

<textarea id="myeditor" cols="25" rows="15"></textarea>

</form>

</body>
</html>

When I click the button, it comes out with <a href=link>linkname</a>, but I want it to be the values set in the prompt.

**Christopher** · 03-22-2005, 05:41 PM

HTML Code:

<!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>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
        function getObj(id)
        {
            var obj = false;

            if(document.getElementById)
                obj = document.getElementById(id);
            else if(document.all)
                obj = document.all[id];
            else if(document.layers)
                obj = document.layers[id];

            return obj;
        }

        function hyperLink(textareaId)
        {
            textarea = getObj(textareaId);

            if(!textarea)
                return;

            var linkname = prompt ( "Please Specify the name of your link..." );
            var link = prompt ( "Please specify the location of the link..." );
            
            textarea.value += '<a href="' + link + '">' + linkname + '</a>';
        }
    </script>
</head>
<body>

<form name="myform">

<input type="button" value="Create Hyperlink" onclick="hyperLink('myeditor')">

<br />

<textarea id="myeditor" cols="25" rows="15"></textarea>

</form>

</body>
</html>

(I've included another function, getObj. You can use this and it will work with different DOM's. That is to say, old IE's and Netscapes, or those that don't support the W3C DOM.)

Anyway, instead of specifying the text as an argument, just create the text within the function.

**dk01** · 03-23-2005, 02:07 AM

edit:// I see someone already got to this.

-dk