how to get dynamically created textarea's value in POST array ?

Question

Hi All,

I am creating few textareas on-the-fly by replacing the content and adding that content in textarea. Please review the code below:

     <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $("#content").find(".editable").each(function(count){
            var content = $(this).html();
            $(this).html("");
            var txtArea = document.createElement('textarea');
      txtArea.setAttribute('cols', '80');
      txtArea.setAttribute('name', "content[]");
      txtArea.setAttribute('rows', '10');
txtArea.innerHTML(content);
            this.appendChild(txtArea);  
        })
     });
     </script>

Now when I post this form to a php page I don't get values of textareas that were created in the POST array

Please provide guidance and do let me know if I can do any thing to make my question more clear...

Thanks

Answer 1

You didn't post any of the html - are the text areas being appended inside the form? If not, then that's your problem.

Answer 2

Also it might be better to create the text area like so:

this.appendChild('<textarea rows="10" cols="80" name="content[]"></textarea>'); 

Answer 3

Tested this in Firefox 3.x.

this.appendChild(txtArea);

This appends the newly created textarea to the existing textarea. What you end up with is:

<textarea class="editable">
    <textarea cols="80" name="content[]" rows="10"></textarea>
</textarea>

I can see how that would give unexpected results. Also what is the point of this?

var content = $(this).html();

You never do anything with the value of content.