26

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>
Amoeba
  • 1,573
  • 4
  • 19
  • 25
  • That doesn't happen to me. How do you *know* that the ` – Pointy Jul 17 '13 at 19:56
  • is the textarea in the element that you are serializing? – Patrick Evans Jul 17 '13 at 19:57
  • I alert all the values of the form when they are serialized, and textarea is undefined even if I have typed in some text. Do you mean I have to do something like $('#my_form textarea').serialize() ??? – Amoeba Jul 17 '13 at 19:57
  • Then I suspect there's a bug in that diagnostic code you've written, as jQuery serialize does work properly. – Pointy Jul 17 '13 at 19:58
  • @JonathanLonowski according to the HTML originally posted (which, for some reason, was taken away), the ` – Pointy Jul 17 '13 at 19:59
  • Also there's no need for a "form" attribute if the element is nested inside the `
    `.
     – Pointy Jul 17 '13 at 20:00
  • Need I add that I am entering into the form using a dialog from jQuery? – Amoeba Jul 17 '13 at 20:03
  • If the textarea is the only thing in the dialog, then yes that would be significant. – Kevin B Jul 17 '13 at 20:06
  • 1
    Note that serialize() will not add textarea value when the textarea includes the readonly attribute. I don't see that in your example, but just in case... – Will Lanni Jul 25 '13 at 18:23
  • 1
    Perhaps you're cloning the form (i.e. `myForm.clone()`) before sending it, which blanks out the textareas. It's a known - and annoying - bug: http://bugs.jquery.com/ticket/3016 – kasimir Nov 14 '13 at 12:53

9 Answers9

36

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>
Dan Atkinson
  • 11,391
  • 14
  • 81
  • 114
Daniel Sokolowski
  • 11,982
  • 4
  • 69
  • 55
5

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"}]
Mulan
  • 129,518
  • 31
  • 228
  • 259
1

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');         
               }
             });
dtharpe
  • 11
  • 1
1

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

grvsmth
  • 443
  • 4
  • 10
0

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

$('button').click(function(){
    alert($('form').serialize());
});
PaulBGD
  • 2,018
  • 5
  • 22
  • 30
0

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.

user3261392
  • 1
  • 1
0

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.

Chuck Snell
  • 11
0

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.

Ismael Sarmento
  • 844
  • 1
  • 11
  • 22
0

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;
}
MistyDawn
  • 856
  • 8
  • 9