Adding div content to form data

Question

I am trying to post a form using jQuery and AJAX that will send some input elements together with the html of a div (from this WYSIWYG plugin) on my page:

        $("#group-add-btn").click(function(){
        var data = $("#group-add").serialize(); // form
        //This is the line vvv
        data["description"] = $("#description-editor").cleanHtml();
        // ^^^
        console.log(data);
        $.ajax({
            type: 'POST',
            url: base_url+"/some/method",
            dataType:'json',
            encode:'true',
            data:data,
            success: function(res){
                console.log(res);
                if(res.errors){
                    $("#group-add .feedback").html(res.errors);
                }
                else {
                    $("#group-container-box .panel-body").append(res.new_content);
                    console.log(res.new_content);
                    $("#group-add").trigger("reset");
                }
            },
            error: function(jqXHR, errorThrown){
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('errorThrown:');
                console.log(errorThrown);
            }
        })
    });

I tried this too:

var data = $("#group-add").serialize() + "&description=" = $("#description-editor").html();

But this cut off the content unexpectedly after it reached a ':' (not sure if this is expected behaviour).

What is the best way to include the html as part of the data that is submitted? I am using Code Igniter, so I would like to be able to access this data using $this->input->post("description") (similar to $_POST['description']).

score 0 · Answer 1 · answered Jul 21 '16 at 08:27

I found out it was an error with ampersands (&) in my html, which can be encoded using encodeURIComponent().

The answer:

var data = $("#group-add").serialize() + "&description="+encodeURIComponent($("#description-editor").html());

I voted for a duplicate.

Adding div content to form data

1 Answers1