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?

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

Answer 2

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.