jQuery serialize() leaves out textarea

Question

When I submit a form using jQuery\'s serialize() method, everything gets submitted except the textarea in the form. Is this a common issue? I can\'t figure it out. The form

Answer 1

It does not work until you add name attribute to the textarea.

<textarea id="sLifeStyle3Content" name="sLifeStyle3Content" placeholder="HTML is allowed">
  <apex:outputText value="{!sLifeStyle3Content}" />
</textarea>

Answer 2

Another work around for this is to turn the textarea value into a variable and pass that with the ajax call...

var comment = $('.note_comment').val();

           $.ajax({
               type: "POST",
               url: '/approot/rewrite.cfm/app.people/insertNote?format=json&Comment=' + comment,
               data: $("form[name='add_note_form']").serializeArray(),
               success: function(data)
               {
              alert('success');         
               }
             });

Answer 3

This is what I use to include/exclude each of the elements as I need them from the form. This method also makes our older forms serializable even though some of the elements only have id's defined and not names.

$( 'textarea' ).each( function() { 
  $(this).attr( 'type', 'textarea' ); 
});

$( 'input:text:not( ".excluded" ), input:checkbox, input:radio, textarea' ).each( function() {

  if (!$(this).hasClass( 'answer' )) { 
    $(this).addClass( 'answer' ); 
  }

  if ( !$(this).attr( "name" ) && $(this).attr( 'id' ) ) { 
    $(this).attr( "name", $(this).attr("id") ); 
  }

});

Then I call the function below to get my serialized array on the $( '.answer' ).change() event, on page navigation and on the $('form').submit() event. This method puts no noticeable load on the page performance that I can discern.

function storeFormData() {
  var serializedData = $( ".answer" ).serializeArray();
  var formDataObj = serializedData;
  var formDataString = JSON.stringify(formDataObj);
  localStorage.setItem(fso_id, formDataString);
  return formDataString;
}