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

4

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.

answered Sep 22, 2011 at 11:46

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

0

$.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");
                             },
        });

answered Sep 22, 2011 at 11:56

chetanspeed511987

2,0152 gold badges25 silver badges36 bronze badges

Collectives™ on Stack Overflow

Serialize data using jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related