Jquery - SerializeArray() by ID

Question

I have this problem, I use serializearray() jquery for serialize all fields of Form to Json. It works fine if in the input I put the name attribute, but if I'd like to put only the ID attribute It doesn't work.

The good function by name [name is similar: '#myformnameid']:

function formToJson(nameForm)
{
 var jsonForm={};
 var queryFrom = $(nameForm).serializeArray();

 for (i in queryFrom) {
   jsonForm[queryFrom[i].name] = queryFrom[i].value;
  }
 return jsonForm;
}

I tried for ID solution with attr.

function formToJson(nameForm)
{
 var jsonForm={};
 var queryFrom = $(nameForm).serializeArray();

 for (i in queryFrom) {
   jsonForm[queryFrom[i].attr("id")] = queryFrom[i].value;
  }
 return jsonForm;
}

Any Idea?

Answer 1

What serializeArray does is take the form input objects and converts them into an array of javascript objects. From the documentation, the form is similar to

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  }    
]

You can iterate over this array by name or value, like you're doing, and it will return the proper data.

The problem you're having is that you're not iterating over the actual elements anymore, just the data from those elements. If you'd like to iterate over the elements, you'll need to do something like:

function formToJson(nameForm)
{
 var jsonForm={};
 $("input", $(nameForm)).each(function(index){
   jsonForm[$(this).attr("id")] = this.value;
 })
 return jsonForm;
}

Answer 2

This is an old post, but I thought I'd add my thoughts. Copying the source code from the link below, you will be able to add any element attribute you would like to the returned array. This way your implementation is exactly that of jQuery. Yea, you will need to manually update your code if the jQuery source is updated, but that is the same with the other solutions posed.

https://searchcode.com/codesearch/view/25323764/

var
  rbracket = /\[\]$/,
  rCRLF = /\r?\n/g,
  rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
  rsubmittable = /^(?:input|select|textarea|keygen)/i,
  rcheckableType = /^(?:checkbox|radio)$/i;

$.fn.extend({
  customSerializeArray: function() {
    return this.map(function() {

      // Can add propHook for 'elements' to filter or add form elements
      var elements = $.prop(this, 'elements');
      return elements ? $.makeArray(elements) : this;
    })
    .filter(function() {
      var type = this.type;

      // Use .is(':disabled') so that fieldset[disabled] works
      return this.name && !$(this).is(':disabled') &&
        rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) &&
        (this.checked || !rcheckableType.test(type));
    })
    .map(function(i, elem) {
      var val = $(this).val();

      if (val == null) {
        return null;
      }

      if ($.isArray(val)) {
        return $.map(val, function(val) {
          return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
        });
      }

      return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
    }).get();
  }
});