Textarea in a form is not submitting via POST with jQuery AJAX

Question

For a reason that is unknown to me, my form is not submitting the text typed into my <textarea>.

ajax code:

$.ajax({
type:'POST', 
url:'****.php', 
data:$('#blogForm').serialize(),
success: function(responseSubmit) { blah blah etc...

The inputs work just fine, and correctly post to my database.

The form is:

<form id="blogForm">
                        <input type="date" name="date" id="blogDate">
                        <input type="text" name="title" id="blogTitle">
                        <textarea name="blogContent" id="blogBody"></textarea>
                        <input type="submit" name="submit" id="blogSubmit">
                    </form>

And what I get when I inspect in firebug, the POST is: date=09%2F25%2F1986&title=Title&blogContent=

As you can see, the blogContent is empty. Why is this?

I can't see anything noticeably wrong with what you've posted and jQuery serializes `` elements just fine in my experience. When is the `$.ajax()` function being called? — Anthony Grist, Jul 31 '12 at 21:15
Maybe this helps http://forum.jquery.com/topic/textarea-and-ajax-with-serialize-help — dknaack, Jul 31 '12 at 21:16
Are there line breaks in the data? It might be this issue: http://stackoverflow.com/questions/4115457/jquery-serialize-error-with-textarea-filed — Jory Cunningham, Jul 31 '12 at 21:16
Is blogContent more than just a textarea, perchance? i.e. -- is it a tinymce/ckeditor? — Lusitanian, Jul 31 '12 at 21:16
It works just fine in [this fiddle](http://jsfiddle.net/3bCZy/). — Christofer Eliasson, Jul 31 '12 at 21:17
It is an WYSIWYG text editor... called nicEditor. The ajax function is being called when the submit button is clicked. So far, there wasnt any line breaks that I noticed. I will double check that though. — mdance, Jul 31 '12 at 21:18
@JoryCunningham I think that's been fixed in more recent versions of jQuery (that question/answer is from nearly two years ago), but I could be mistaken. — Anthony Grist, Jul 31 '12 at 21:19
Since it works in the fiddle, it must be the WYSIWYG editor attached to it... — mdance, Jul 31 '12 at 21:19
I imagine your WYSIWYG is doing something to that field that makes jquery not want to serialize it. Can you try to encodeURIcomponent and manually add the value to the serialized string? — Mike Brant, Jul 31 '12 at 21:20
One way to solve this is to go directly on the inputs: `$('#blogForm input, #blogForm textarea').serialize()` — Sammaye, Jul 31 '12 at 21:22
It was my WYSIWYG editor... Thanks for the help. I guess Ill go with another one, or build it myself ;P Thanks — mdance, Jul 31 '12 at 21:24
use this http://stackoverflow.com/questions/4115457/jquery-serialize-error-with-textarea-filed — Code, Sep 07 '12 at 11:23

score 5 · Accepted Answer · answered Jul 31 '12 at 21:28

5

I neglected to mention that I had a WYSIWYG editor attached to the text area, called nicEditor. Apparently there is a bug that forced jQuery to not serialize the textarea. Once the nicEditor was removed, it worked fine. Thanks for all the help.

answered Jul 31 '12 at 21:28

mdance

966
5
16
36

score 1 · Answer 2 · answered Mar 04 '13 at 11:41

1

Change:

   data:$('#blogForm').serialize(),

To:

   data:$('#blogForm').find('input, select, textarea, button').serialize(),

answered Mar 04 '13 at 11:41

hsuk

6,770
13
50
80

score 0 · Answer 3 · edited Jan 01 '16 at 11:42

Add return false onsubmit

<code>
<form id="blogForm" onsubmit="return(false);">  
    <input type="date" name="date" id="blogDate">
    <input type="text" name="title" id="blogTitle">
    <textarea name="blogContent" id="blogBody"></textarea>
    <input type="submit" name="submit" id="blogSubmit">    
  </form>
</code>

Call ajax on button click

$("#blogSubmit").on('click',function(){      

$.ajax({
type:'POST', 
url:'****.php', 
data:$('#blogForm').serialize(),
success: function(responseSubmit) { blah blah etc...

});

score 0 · Answer 4 · answered Aug 02 '12 at 18:35

0

Your textarea name is blogContent but the id is blogBody. The # selector uses the id, not the name.

answered Aug 02 '12 at 18:35

Phillip Harrington

352
7
16

The selector uses the id *of the form* – Quentin Sep 27 '12 at 11:51

score 0 · Answer 5 · answered Sep 27 '12 at 11:49

You shouldn't need to remove your editor - they usually work by using JS to update the hidden textarea after each keystroke, or when the form submits, so that shouldn't make a difference provided the editor is getting that bit right.

I imagine the issue is as Phillip suggested - that your ID and name attributes differ. All the others match up fine. When it serialises it must be using the IDs, and presumably in your script at the other side you're expecting the names to come though (which a normal form submit would do).

Since you're sending via $POST, just do a var_dump($_POST); in your script and then log that to the console or alert it out in your JavaScript - see what exactly is getting sent via AJAX to your script.

If the textarea isn't there under any name, then you know the issue is definitely the editor, and if it is, try manually calling the methodsfor nicEditor which will update the hidden textarea.

score 0 · Answer 6 · edited Apr 22 '13 at 12:57

if you are using ajaxSubmit then POST data from textarea of any text editor won't work.

So you have to get the value & put it into hidden field then you can get the POST value like this:

<textarea id="safety" name="safety" style="width:600px;height:70px"></textarea>
<input type="hidden" name="safety_precautions" id="safety_precautions">

before ajaxsubmit

$('#safety_precautions').val(tinyMCE.get('safety').getContent());

Textarea in a form is not submitting via POST with jQuery AJAX

6 Answers6