jQuery - get array with input names as keys

Question

I need get the same type of array that this.form.elements returns, with input names as array keys.

I tried this.toArray(), but even though it looks the same, it's missing the name keys (the keys are numbers).

Here's the full function:

(function( $ ) {
  $.fn.blah = function(){
    var that = this;
    return this.each(function(){
       $(this).bind('change', function(){
           var matches1 = that.toArray();  // this doesn't work
           var matches2 = this.form.elements;  // this works.

           console.log(matches1); // but both arrays look the same. wtf?
           console.log(matches2);

           return true;
        }).change();

   });
 };

 })(jQuery);

using it as $("input").blah();

it's a set of selectors, comes from $("input").somefunction().... — Alex
– Alex, Commented Jan 30, 2011 at 21:57

user113716 · Accepted Answer · 2011-01-30 22:34:38Z

3

In javascript you don't use an Array for named keys. You'd use an Object instead. I assume the values should be the elements themselves.

var result = {};

$.each(this.form.elements, function() {
    result[ this.name ] = this;
});

~~Regarding your update, this line:~~

var matches1 = that.toArray();

...doesn't work because you're calling jQuery's toArray() against a jQuery object.

If you wanted to use that, you'd call it from the library, and pass it the jQuery object.

var matches1 = $.toArray( that );

~~...although I don't know why you'd want to turn the jQuery object representing all <input> element into an Array on each change event.~~

This line:

var matches2 = this.form.elements;  // this works.

... works because it is simply a reference to the elements in the form from the <input> element that received the event. It uses native DOM API properties to get a collection (that isn't technically an Array).

Had to edit my answer because I was wrong about the use of toArray(). I was thinking of makeArray(). The toArray() method is a wrapper for .get() and does exactly the same thing.

edited Jan 30, 2011 at 22:34

answered Jan 30, 2011 at 22:11

user113716

323k64 gold badges454 silver badges441 bronze badges

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

5 Comments

Alex Over a year ago

thank you for the detailed explanation :) So can I get a reference to the elements from "that" just like ".elements" does from "this.form" ?

user113716 Over a year ago

@Alexandra: Your that variable is a reference to a jQuery object that contains the result of your original $('input') selection. As such, it references all inputs that were found on the page. When you do this.form.elements, you're only referencing the elements in the same form as this (which is the element that received the change event).

karim79 Over a year ago

I think your last comment pretty much wraps this up.

user113716 Over a year ago

@karim79: Could be. I've got to admit that I can't quite figure out the ultimate intent of the code yet.

user113716 Over a year ago

@karim79: Though I was completely wrong about toArray. It's just a wrapper for .get(). I was thinking of makeArray. Sometimes I just have to roll my eyes at parts of this API.

000 · Accepted Answer · 2011-01-30 21:58:33Z

2

Serialize is a possible choice. http://api.jquery.com/serializeArray/

$(this).serializeArray() rertuns it. :)

answered Jan 30, 2011 at 21:58

000

2801 gold badge2 silver badges11 bronze badges

Comments

Anurag · Accepted Answer · 2011-01-30 22:23:10Z

1

form.elements returns an object of HTMLCollection or HTMLFormControlsCollection in HTML5.

The elements in these objects are accessible by index or name. So if you have a form with a single input element named "login", you could do:

form.elements.[0]

or

form.elements["login"]

to access the same element. You could simulate such an object by adding two entries for each form element with its corresponding index and name. But if form.elements works for you, I'd recommend using that directly.

answered Jan 30, 2011 at 22:23

Anurag

142k37 gold badges223 silver badges262 bronze badges

Collectives™ on Stack Overflow

jQuery - get array with input names as keys

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related