Question

I have the following HTML code:

<div id="summary_form">
    <textarea class="summary">Please fill in</textarea><br/>
    <textarea class="summary">Please fill in</textarea><br/>
   <div>

And I have the following JS code that is called on document.ready:

var summaries = $('textArea.summary');

This JS grabs all textareas with the class name ‘summary’ and stores it in the summaries variable.

I also have a link that when users click on it, will dynamically add another textarea with the ‘summary’ class name using Ajax, as follows:

$("#add_summary").click(function(){  
  $('#temp').load("/addSummary.html", function() {
  $("#summary_form").append($('#temp').html());
  summaries = $('textArea.summary');
});

The addSummary.html simply contains the following HTML:

<textarea class="summary">Please fill in</textarea><br/>

When the form is submitted, I am running the following code to clear the textareas of the “Please fill in” helper text as follows:

$("#user-form").submit(function () {
 //First reload all old and new textareas into summary variable - THIS PART IS NOT WORKING!
 summaries = $('textArea.work_history_summary');

 for (var i=0; i<summaries.length; i++)
    {
      if (summaries[i].value == 'Please fill in')
      {   
        summaries[i].value = '';
      }
    }
 });

But when the form submits, all the original textareas are cleared, but the newly added textareas are not. For some reason, JQuery is not able to see the new textareas and store them in the summary variable.

Any idea what I may be doing wrong?

Thanks!

Answer 1

Is it possible that what you load is a bit different – not textArea, or not summary? Just by mistake?

Additionally, consider using $.ajax() method:

$.ajax({
    url: '/addSummary',
    success: function(response) {
        $('#summary_form').append(response);
        summaries = $('textArea.summary');
    }
});

This way you will not need any temporary storage, but will be able to append obtained html directly to you form. Maybe this will also fix your issue. (I could be a bit wrong with the parameter names or function arguments order, but you have got the main idea, have not you?)