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>     

Solution 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>

Solution 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"}] 

Solution 3

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

Solution 4

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

View more solutions

Comments

[Pointy]

That doesn't happen to me. How do you know that the <textarea> is being left out?

[Patrick Evans]

is the textarea in the element that you are serializing?

[Amoeba]

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() ???

[Pointy]

Then I suspect there's a bug in that diagnostic code you've written, as jQuery serialize does work properly.

[Pointy]

@JonathanLonowski according to the HTML originally posted (which, for some reason, was taken away), the <textarea> is definitely in a <form>.

[Pointy]

Also there's no need for a "form" attribute if the element is nested inside the <form>.

[Amoeba]

Need I add that I am entering into the form using a dialog from jQuery?

[Kevin B]

If the textarea is the only thing in the dialog, then yes that would be significant.

[Will Lanni]

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...

[kasimir]

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: bugs.jquery.com/ticket/3016

[TomSelleck]

The reason OP's wasn't working was because they forgot the name attribute

[Mulan]

OP posted this <textarea form="new_note_form" id="note_text" name="note_text" required="required"></textarea>. Looks like it has a name attribute to me.