Serialize data using jQuery

Question

I'm looking to improve my jQuery code.

The piece of code is submitting data to another PHP page for processing.

At the moment I'm taking data submitted from a form, and taking data from a custom data attribute from the page.

Here's the code

// Add new comment to nit on comment.php page

$('#new_comment_form').bind('submit', function(e) {

        // Prevent default
        e.preventDefault();

        var commentNitId = $('#left_content').attr('data-nit-id');

        var commentData = 'nit_id=' + commentNitId + '&new_comment_text=' + $('textarea.new_comment').val();

        $.ajax({
            type: "POST",
            url: "ajax/addComment.php",
            data: commentData, 
            dataType: "json",
            success: function(comment_response) {

                // Code upon success

            },
            error: function() {
                            // Error
                alert("Error adding comment");
            }
        });
    });

I'm just wondering if there is a better ("neater") way to serialize the data ready to submit to the form?

Kind Regards,

Luke

lonesomeday · Accepted Answer · 2011-09-22 11:46:51Z

Yes. If you supply an object (a standard Javascript object) to $.ajax as the data option, jQuery will handle the serialization for you.

$.ajax({
    type: "POST",
    url: "ajax/addComment.php",
    data: {
        nit_id: commentNitId,
        new_comment_text: $('textarea.new_comment').val()
    },
    dataType: "json",
    success: function (comment_response) {

        // Code upon success
    },
    error: function () {
        // Error
        alert("Error adding comment");
    }
});

If you want to what this produces, the function used internally is jQuery.param. So:

jQuery.param({
    nit_id: 5,
    new_comment_text: 'foobar'
});
// output: "nit_id=5&new_comment_text=foobar"

Note that this has the added bonus of escaping characters where necessary.

Pipalayan Nayak · Accepted Answer · 2011-09-22 11:46:11Z

0

Please look at jquery serialize() and serializeArray() functions. They provide a neat way to get form data.

answered Sep 22, 2011 at 11:46

Pipalayan Nayak

9572 gold badges8 silver badges13 bronze badges

2 Comments

Luke Over a year ago

Hi Pipalayan, I have explored these functions, however my complication comes when it comes to producing a serialized array based on the form elements and the data attributes. How do I merge the two? Thanks again!

Pipalayan Nayak Over a year ago

@LukeCoulton Unfortunately there is no straightforward way to get a serialized array based on data attributes {serializeArray() gives you array based on "name" attribute}. For any other custom attribute, you would have to iterate the form elements and find your values.

chetanspeed511987 · Accepted Answer · 2011-09-22 11:56:34Z

$.ajax({
            dataType: 'json',
            type:'post', 
            url: "ajax/addComment.php",
            data:$(this).parents('form:first').serialize(),
                            success: function (comment_response) {

                                     // Code upon success
                                 },
                            error: function () {
                                       // Error
                                alert("Error adding comment");
                             },
        });

Collectives™ on Stack Overflow

Serialize data using jQuery

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related