javascript to populate a textarea

[technotool]

Hi any help would be appreciated and rewarded to your donation site.

 

Is there a way to populate a textarea form element with a list of elements (<span>)(onclick)  and then see it populate the textarea in real time.

 

<span id="item1">pizza</span> <span id="item2">coke</span> <span id="item3">marshmello</span> <span id="item4">salad</span> <span id="item5">A1</span> <span id="item6">lettuce</span> <span id="item7">oranges</span> <span id="item8">apples</span>

 

enduser clicks pizza ==> populates textarea in realtime (for visualization)

enduser clicks marshmello ==> populates textarea in realtime (for visualization)

 

<textarea> </textarea>

<submit> ==>sends textarea array to the php processing file for explosion.

 

regards technotool.

 

[haku]

This is tried, tested and works in IE7 and Firefox 2. It will add the contents of the span tags to the text area as they are clicked, separating each value with a space. When the submit button is clicked, the page will submit to 'processing.php' - change this to whatever page you want to submit to.

 

HTML:

<div id="span_list"><span id="item1">pizza</span> <span id="item2">coke</span> <span id="item3">marshmallow</span> <span id="item4">salad</span> <span id="item5">A1</span> <span id="item6">lettuce</span> <span id="item7">oranges</span> <span id="item8">apples</span></div>

<form action="processing_page.php" method="post">
   <textarea id="targetTextArea"></textarea>
   <input type="submit" name="submit" value="submit" />
</form>

 

Javascript:

function spanListener()
{
   var spans = document.getElementById("span_list").getElementsByTagName("span")
   var target = document.getElementById("targetTextArea")
   for(var i = 0; i < spans.length; i++)
   {
        spans[i].onclick = function()
        {
             if(target.value != "")
             {
                 target.value = target.value + " "
             }
             target.value = target.value + this.firstChild.data
         }
    }
}

window.onload = function()
{
    spanListener()
}

 

 

[technotool]

Amazing work. thanks the technotool

[technotool]

Hi,

 

The below code will populate a <textarea> in realtime(onClick method) with item in the id="span_list". (Web) PageSpace is of real concern and the textarea must be populated with whole paragraphs of information.  If I provide the whole paragraph between the <span id="itemN"></span> --there is too too much text and the page becomes unmanageable. 

 

Is there a way to populate the <textarea>'s with onClick method but each item refers back to a $string or string_array[] which will then populate the textarea for submission to phpprocessing.php file.  Thanks in advance.

 

 

 

<div id="span_list"><span id="item1">index1</span> <span id="item2">index2</span> <span id="item3">index3</span> <span id="item4">index4</span> <span id="item5">index5</span> <span id="item6">index6</span> <span id="item7">index7</span> <span id="item8">index8</span></div>
<form action="processing_page.php" method="post">
   <textarea id="targetTextArea"></textarea>
   <input type="submit" name="submit" value="submit" />
</form>

 

javascript:

function spanListener()
{
   var spans = document.getElementById("span_list").getElementsByTagName("span")
   var target = document.getElementById("targetTextArea")
   for(var i = 0; i < spans.length; i++)
   {
        spans[i].onclick = function()
        {
             if(target.value != "")
             {
                 target.value = target.value + " "
             }
             target.value = target.value + this.firstChild.data
         }
    }
}

window.onload = function()
{
    spanListener()
}

 

 

[haku]

So to get this straight, do you mean that you want to have the text in a span refer to something, but you only want to display either part of that something, or a reference to it so as to keep your page uncluttered? And when you click on it, the full version is inserted into the text area?

 

If that's the case it's fairly easy to do, I'll explain it after you confirm.

[technotool]

Hey Haku,

 

Sorry if I wasn't clear.  What I am trying to achieve is for a list of "reference item_x" "reference item_y" that recall a $variable_x $variable_y (onClick) of the "reference item" to the <textarea></textarea>

 

So:

 

<textarea></textarea>

list:

reference_item_x, reference_item_y

 

onClick event of reference_item_x populates textarea

 

<textarea>$variable_x</textarea>

 

[haku]

Honestly, I still don't get what you are saying! Sorry!

 

Can you give a specific example of what the span will look like, and how you want the text area to look after the span has been clicked?

[technotool]

Hey I am sorry. Thanks for sticking with me on this. I am confusing my php syntax with my javascript syntax.

 

so what I am trying to do is define a variable in the head like this :

<script>
var pizza_pepperoni = "bread, pepperoni, tomato sauce, cheese"
var pizza_cheese= "bread, tomato sauce, cheese"
</script>

and then in the span_list something like this:

<div id="span_list">    
<span id="item1"><script>document.write(pizza_pepperoni)<script></span>                                                             
<span id="item2"><script>document.write(pizza_cheese)<script></span> 
<span id="item3"></span> 

What I get is the variable definition in the span list ie. "Bread, pepperoni, tomato sauce, cheese".  I don't want this. I want the variable to display in the span list and then when it is clicked it populates the textarea with "Bread, pepperoni, tomato sauce, cheese".  If I put qotoes around the arguments in document.write like so:

 

<span id="item1"><script>document.write("pizza_pepperoni")<script></span>                                                             
<span id="item2"><script>document.write("pizza_cheese")<script></span> 

 

It looks right!

 

pizza_pepperoni, pizza_cheese

 

But it populates the textarea with the word "undefined".  I mean I guess this could also be done with <a href /a> tags and += augment loop onto a var variable_x and then have the textarea value equal the var variable_x. but I would like to stick with the current construct. 

 

haku, thanks for your help in advance.

 

 

[haku]

Ok, now I gotcha!

 

HTML:

<div id="span_list"><span id="item1"></span> <span id="item2"></span></div>
<form action="processing_page.php" method="post">
   <textarea id="targetTextArea"></textarea>
   <input type="submit" name="submit" value="submit" />
</form>

 

I only did an example with two spans - you will have to add more as necessary.

 

Javascript:

function spanListener()
{
   var spans = document.getElementById("span_list").getElementsByTagName("span")
   var target = document.getElementById("targetTextArea")
   for(var i = 0; i < spans.length; i++)
   {
        spans[i].onclick = function()
        {
		 if(this.firstChild.data == "Pepperoni Pizza")
             {
			 target.value = "bread, pepperoni, tomato sauce, cheese"
             }
             if(this.firstChild.data == "Cheese Pizza")
             {
                 target.value = "bread, tomato sauce, cheese"
             }
         }
    }
}

window.onload = function()
{
    spanListener()
    var target1 = document.getElementById("item1")
    var newText1 = document.createTextNode("Pepperoni Pizza")
    target1.appendChild(newText1)
    var target2 = document.getElementById("item2")
    var newText2 = document.createTextNode("Cheese Pizza")
    target2.appendChild(newText2)    
}

 

That should be close to what you were looking for. You will need to add stuff into the javascript in order to add extra spans. Just copy the pattern that I have given you. I should also mention that if a user has javascript turned off, the spans will be empty and the user won't be able to see anything. On that note, you may want to hard code the span text into the HTML rather than adding it with javascript.

[technotool]

This is so generous.  thanks so much.  You are truly a js-ninja.

 

The Technotool