Separate array of elements by attribute

Question

Let's say I've got a form with several inputs, and I use a pretty standard jQuery statement to get them all:

var inputs = $("#some-form").find("input")

Now, I'd like to act on those inputs, but let's say I want to treat the radio button and/or checkbox groups as a single thing. How can I split inputs out into elements grouped by an attribute, say name. Note, that I don't know what the name is going to be when the processing starts.

In human terms, I need the logic do do something along the lines of:

Let me iterate over the list of inputs. For each input, let me check to see if it's already been added to a placeholder array. If so, leave it alone. If not, add it and everything with it's name to said placeholder array (as a sub array).

Essentially, I'd like something like this:

[[<input type="text" name="name1">], [<input type="radio" name="name2">,<input type="radio" name="name2">]]

Selvakumar Arumugam · Accepted Answer · 2013-02-06 19:38:36Z

2

Try using attribute selector inside a filter.

var $formInput = $('#some-form').find('input');
var inputText = $formInput.filter('[type=text]')
var otherInput = $formInput.filter("[type=radio]")
                          .add($formInput.filter('[type=checkbox]'));

or even better

var otherInput = $formInput.filter(function () {
                     return this.type == 'radio' || this.type == 'checkbox';
                  });

DEMO: http://jsfiddle.net/utwaf/

How can I split inputs out into elements grouped by an attribute, say name

var elements = []; //elements by name
var $formInput = $('#some-form').find('input');
elements.push($formInput.filter(function() { 
   return this.name == 'name1';
});
elements.push($formInput.filter(function() { 
   return this.name == 'name2';
});

Note: All elements pushed into the array are jQuery objects.

edited Feb 6, 2013 at 19:38

answered Feb 6, 2013 at 19:27

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

1 Comment

Kevin Whitaker Over a year ago

Sorry, I should have clarified. I don't know the name of the input when I start the processing. Basically, I want to be able to have the code say "Ok, I've got an input. Check to make sure I haven't already added it to the array of inputs, and if not, add it and everything with the same name to the array."

Domenic · Accepted Answer · 2013-02-06 21:35:35Z

function getInputsPartitioned(formEl) {
    var inputEls = formEl.querySelectorAll("input");

    var inputsByName = Object.create(null);
    for (var i = 0; i < inputEls.length; ++i) {
        var inputEl = inputEls[i];
        var name = inputEl.name;

        if (!(name in inputsByName)) {
            inputsByName[name] = [];
        }
        inputsByName[name].push(inputEl);
    }

    // `inputsByName` now looks like this:
    // {
    //     name1: [<input type="text" name="name1">],
    //     name2: [<input type="radio" name="name2">, <input type="radio" name="name2">]
    // }

    // To get it into arrays:

    return Object.keys(inputsByName).map(function (name) {
        return inputsByName[name];
    });
}

Bonus: no jQuery needed.

Collectives™ on Stack Overflow

Separate array of elements by attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related