Difference between serialize and serializeObject jquery

Question

I search a lot but didn't find perfect difference between serialize and serializeObject method of jquery.

Please help me to understand this.

Answer 1

As you can see here, serializeObject is not a native jQuery Method and thus only exist if you or a previous programmer of the site inserted it. As is mentioned in an Q&A found here, this function was probably found when someone working on your site "searched a way to serialize a form" and found the following extension:

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

Look for serializeObject somewhere in your JS, but note, it's probably not needed as it appears to do the same thing as $.fn.serialize.

---

Upon further review, I found it's not the exact same. serializeObject method found at other Q&A will serialize a form's value's as an Object, while serialize encodes the values as a string for submission.

Please take note, if you want something like serailizeObject that is native to the jQuery Core, then please see serializeArray.

The result will be slightly different in that serializeArray will make an array of objects of your form values. each Object having { name: "", value: "" }

EXAMPLE

^{Please see Developer Tools Console in example.}

Answer 2

I have done some digging here on stackoverflow on serializing form to json object and I ended up finding this method

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

yet it doesn't fit on what I was working on. So I created my own plugin. If your interested you might what to check this out https://github.com/citnvillareal/serializeObject

Answer 3

$.serializeObject is a variant of existing $.serialize method which, instead of encoding form elements to string, converts form elements to a valid JSON object which can be used in your JavaScript application.