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 works except for just the textarea which stays undefined???

<textarea form="new_note_form" id="note_text" name="note_text" required="required"></textarea>     

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

No it doesn't.

It works fine. http://jsfiddle.net/nuBkM/

<form>
    <input name="foo" value="bar"/><br>
    <textarea name="something">lorem ipsum</textarea>
</form>

The JavaScript

console.log($("form").serialize());
// => foo=bar&something=lorem+ipsum 

---

.serializeArray works too

console.log($("form").serializeArray());
// => [{name: "foo", value: "bar"}, {name: "something", value: "lorem ipsum"}] 

Answer 3

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 4

If the textarea is controlled by an editor like tinyMCE, you may need to call tinyMCE.triggerSave(), as described in this answer.

Answer 5

Works fine in the fiddle. http://jsfiddle.net/Ultimate/2Ey2A/ Testing with

$('button').click(function(){
    alert($('form').serialize());
});

Answer 6

I have the same experience. Submitting a form using $("#form_id").serialize() does not include the textarea fields. This behavior is consisent for the past 2 years in the only form that has textarea elements. Every now and then I re-examine form and code to conclude that it should work, but doesn't.

My work-around is, unsurprisingly, to first move the content of the textareas into hidden text boxes and then serialize the form data.

Answer 7

We ran into the same problem with a textarea not being serialized despite having the name attribute set, and noticed it depended on where in the form the textarea was placed. We had the luxury of moving the textarea to another location on the form to resolve the problem.

Answer 8

It leaves out the textarea , unless you Remove 'form="new_note_form"' from your textarea element.

I know it's against good practices, but, if you want to use jQuery's serialize function, you gotta remove this attribute from textarea element.

Answer 9

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;
}