Javascript - How can I replace a textarea with its contents?

[DeX]

I have a textarea

<textarea id = "notes5" rows = "3" cols = "105" value = "" ></textarea>

and I have some javascript

    for (i = 0; i < textareaBoxesCount; i++)
    {
textareaBoxes[i].parentNode.innerHTML = textareaBoxes[i].value;
    }

Whenever this runs it always replaces the textarea with nothing, regardless of what I type into it. Is the textarea value attribute blank until the form is submitted? I don't want to submit the form until after it is replaced, is this possible?

Just so you know the rest of it works, changing it to a value like this:

    for (i = 0; i < textareaBoxesCount; i++)
    {
textareaBoxes[i].parentNode.innerHTML = "asdfasdf";
    }

does replace the textbox with "asdfasdf". So it does work, it just isn't getting the value of the textarea like it should. Any suggestions?

[Mahngiel]

http://jsfiddle.net/dryWF/1/

[nogray]

what is "textareaBoxes", are you using getElementsByTagName('textarea')?

[DeX]

  Quote

what is "textareaBoxes", are you using getElementsByTagName('textarea')?

 

Yes, sorry, not sure how I left that out.

 

 
var textareaBoxes = document.getElementById("purchase-order-area").getElementsByTagName("textarea");
var textareaBoxesCount = document.getElementById("purchase-order-area").getElementsByTagName("textarea").length;

[nogray]

Your code should work fine, but you might have a structure problem.

If all the textareas are under the same parent, the parent innerHTML will be the first textarea (after that you'll get an error). So, you HTML should be something like this

<div id="purchase-order-area">
    <div>
        <textarea id = "notes5" rows = "3" cols = "105" value = ""></textarea>
    </div>
    <div>
        <textarea id = "notes6" rows = "3" cols = "105" value = ""></textarea>
    </div>
</div>

[DeX]

There is only 1 text area on the screen at any time but the id/name could change depending on which AJAX function is called to display it. Here is the exact layout, no shortening:

	    <table class = "site-table">
		<thead>
		    <tr>
			<th>Notes</th>
		    </tr>
		</thead>
		<tbody>
		    <tr>
			<td>
			    <textarea id = "notes5" rows = "3" cols = "105" value = "" ></textarea>
			</td>
		    </tr>
		</tbody>
	    </table>