jQuery serialize error with textarea filed

Question

I'm using this function, to submit form in the background, with custom messages. It works perfectly, except with textarea fields. I've read that the serialize function has problems with ex. linebreaks.

 $(function() {
      $("#comment_form").validate({    submitHandler: function(form) {
        $.post('/u/r/l/', $("#comment_form").serialize(),
 function(data) {
            $('#comment_container').html(data);
                });
            }
        });

The textarea is a markitup! editor area.

Dewberry

Please format your code to use newlines and tabulations :) – Belfast

I've did, the editor ruined it. But thx ;) – Dewberry

Take a look here, it may help: api.jquery.com/serialize/#comment-67394779 – Otherwise

Just to make sure I'm not jumping to wrong conclusions: are you trying to have the markitup textarea (that the user himself is changing) be serialized into data to send to the server? – Belfast

Yes, that is the point. Maybe the solution will be that Achonix has linked, but i'm only beginner in jquery, and can't implent that to my script :S. (I'm rather a XHTML+CSS, designer pro :P ) – Dewberry

Why are you using formSerialize instead of just serialize? – Coseismal

I assume that you gave the textarea a name attribute and put it inside the form? – Mockingbird

Liam: I've mentioned, that was just a mistake in my post. thejh: Of course. Normal post of the form works ok... Just the ajaxed jquery one not. I'm using this script on others forms, where no texarea found, with success. – Dewberry

Answer 1

As stated here: http://api.jquery.com/serialize/#comment-67394779

function keepLB (str) { 
  var reg=new RegExp("(%0A)", "g");
  return str.replace(reg,"%0D$1");
}

$(function() {
  $("#comment_form").validate({ submitHandler: function(form) {
    $.post('/u/r/l/', keepLB($("#comment_form").formSerialize()), function(data) {
      $('#comment_container').html(data);
    });
  }
});

If it doesn't work, manually urlencode the textarea data:

$(function() {
  $("#comment_form").validate({ submitHandler: function(form) {
    $.post('/u/r/l/', "textareadata="+escape($("#mytextarea").value), function(data) {
      $('#comment_container').html(data);
    });
  }
});

And if you also want to send other form contents (note: don't give the textarea a "name" here, just an id!):

$(function() {
  $("#comment_form").validate({ submitHandler: function(form) {
    $.post('/u/r/l/',
    $("#comment_form").formSerialize()+"&textareadata="+escape($("#mytextarea").value),
    function(data) {
      $('#comment_container').html(data);
    });
  }
});

Mockingbird

Doesn't submit my comment at all :S – Dewberry

@wintercounter: Which one? The second one only sends the textareas content. – Mockingbird

I have many hidden fields too generated by the CMS so that wouldn't be ok. If the textareas name is "comment", than this: <?php echo $_POST["comment"]; ?> should print the jQuery'ed request? – Dewberry

In this example, the data gets sent under the name "textareadata" and gets read from the element with the id "mytextarea". – Mockingbird

In a few words: This is a Comment form. Just to imagine: there's the form, under that the comments. And all this is being reloaded, on the submission of the form. Now with the 3rd script i've got a data back: undefined It's from PHP or JavaScript? – Dewberry

I assume that jquery couldn't get the content from the textarea :S – Dewberry

What a lame am i :) There this before the POST: $(".comment_wrapper").html("Loading..."); so it deletes the full form -.- Sry guys, and thanks everything ; – Dewberry

Answer 2

One thought (if standard usage of jQuery serialize isn't working) is that the markitup code is taking that textarea and do something fancy with it so that it doesn't even act like a textarea anymore. Is there some way in Markitup API to retrieve the data perhaps?

Belfast

It surely have, but don't how to use :S – Dewberry

Tried without markitup with a plain textarea. It didn't work. – Dewberry

Answer 3

Here main_post_txt is the id of html text area element which you are using and in jquery you can get easily its value by using

var post_text = $("#main_post_txt").serialize();  

Cologne