JQuery sends empty values

Question

I dont get it... I reviewed my code hundred times and I dont get the error...

I am actually testing a bit with JQuery and AJAX and made a simple form with a textarea to submit. Without AJAX it works fine, but with, it sends always an empty value of my textarea...

The Javascript Code:

 $(document).ready(function(e) {
        $("#formPost input").attr("disabled", false);

        $("#formPost input:submit").click(function() {
            $.ajax({
                type: 'POST',
                url: 'post.php',
                dataType: 'json',
                data: $('#formPost').serialize(),
                beforeSend: function(XMLHttpRequest) {
                    $("#formPost input").attr("disabled", true);
                    $("#formPost .ajaxloader").show();
                },
                success: function(data) {
                    var message = $("#flashMessage");

                    message.text(data.msg);
                    if(data.error) {
                        message.addClass("fail");
                    }
                    else {
                        message.addClass("success");
                    }
                    message.show();
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#formPost .ajaxloader').hide();
                    $('#flashMessage').removeClass().
                        addClass('fail').text('There was an error.').show();
                },
                complete: function(XMLHttpRequest) {
                    $("#formPost input").attr("disabled", false);
                    $("#formPost .ajaxloader").hide();
                }
            });
            return false;
        });
    });

The HTML:

<div>
      <h1>Add new post</h1>
      <div id="flashMessage"></div>
      <form id="formPost" method="post" action="post.php">
        <textarea id="post" name="post"></textarea>
        <input type="submit" value="Save" />
        <div class="ajaxloader">
          <img src="ajax-loader.gif" />
        </div>
        <div class="clear"></div>
      </form>
    </div>

I use Firebug and look under "Network" -> "XHR" -> "Post" and under Source he shows post=

So where is the value gone?

It is working for me http://jsfiddle.net/usmanhalalit/zayU5/ . Are you using rich text editor to replace textarea? — Muhammad Usman, Dec 31 '11 at 17:15
Yes I do lol :/ Is that a bad sign? Edit: Ok, I removed the CKEditor (Rich Text Editor) and it works fine. But why doesnt it work with the RTE? — Fortuna, Dec 31 '11 at 17:22

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

Your problem is related with CKEditor (as you said in the comment), because WYSIWYG editors replace the appearance of textarea and update value on form submit. So you have to use built-in functions of CKEditor for updating textarea's value manually as you are using Ajax. I can't help you specifically with CKEditor but this thread may help: CKEditor, AJAX Save .

edited May 23 '17 at 12:03

Community

1
1

answered Dec 31 '11 at 17:51

Muhammad Usman

12,439
6
36
59

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

You are disabling the form elements in the beforeSend method, but JQuery's serialize will ignore those disabled elements. Try removing that first to test. This SO question has some ways to get around it.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 31 '11 at 17:04

Nate B

6,338
25
23

1

I think he is disabling `input` only, not `textarea`. – Muhammad Usman Dec 31 '11 at 17:16

JQuery sends empty values

2 Answers2