Home » Php » php – Textarea in a form is not submitting via POST with jQuery AJAX

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

Posted by: admin July 12, 2020 Leave a comment

Questions:

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?

How to&Answers:

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.

Answer:

Change:

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

To:

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

Answer:

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

Answer:

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.

Answer:

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

Answer:

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

});