Read HTML array using javascript or jQuery

Question

I have array element in HTML

<input type="checkbox" value="Value1" name="model[settings][]">
<input type="checkbox" value="Value2" name="model[settings][]">
<input type="checkbox" value="Value3" name="model[settings][]">

I am reading all the HTML input, iterating it and building a hash in the javascript. But this will read the array element and only pick the last model[settings][] element.

var inputs = jQuery(" :input", "#elementID");

Is there a way in jQuery or JavaScript to read and build an array variable in javascript which then can be passed to controller ?

Thank You

why are you using same array name for checkboxes? For radios this is understandable but not for checkboxes — charlietfl
– charlietfl, Commented Jan 20, 2015 at 22:55

Marventus · Accepted Answer · 2015-01-26 14:23:16Z

2

If I understand you correctly, you are trying to iterate through all your input elements to get their value and store that as a JS object, correct? If that's the case, I would add a unique ID to all my inputs, and then create an object with the structure { id : value }:

function getInputObject(sel) {
  sel = $(sel);
  var out = {};
  sel.each(function() {
    out[$(this).attr("id")] = $(this).val();
  });
  return out;
}
$(document).ready(function() {
  console.log( getInputObject("input") );
});

input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input1" value="value input 1" type="text" />
<input id="input2" value="value input 2" type="text" />
<input id="input3" value="value input 3" type="text" />

edited Jan 26, 2015 at 14:23

answered Jan 20, 2015 at 22:11

Marventus

8491 gold badge7 silver badges14 bronze badges

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

10 Comments

ConfusedUser Over a year ago

So i would want to use the name of the HTML element, i.e. name="model[something]", name="model[settings][]" this will build a hash with its name when iterating it, i.e. data[inputs [i].name] = inputs [i].value; but the array name has the same name and overwriting the existing value. so data[model[settings]] should be an array type when its being built instead of assigning data[model[settings][]].

Marventus Over a year ago

In your example, all your names are identical, so your object will only contain one key with the value of the last input. But if your names are something like this: model[settings][smth] and model[settings][smth-else], you would need to change this line: out[$(this).attr("id")] = $(this).val(); to this: out[$(this).attr("name")] = $(this).val(); Updated my answer to reflect this.

Marventus Over a year ago

After you last comment edit, I don't really follow what you are trying to accomplish. I'm sorry, but could you elaborate?

ConfusedUser Over a year ago

i would want to use model[settings][] name to build an object data[model[settings] with type array. Currently it iterates through all the input element and build data[model[settings][]] and kept on overwriting it due to the same name. Is there a way without using the id but just look at the name to check if it contains [] then build an object array ?

Marventus Over a year ago

I see... So, if the element's name is simply model[settings], it wouldn't make it into the array, but if it is model[settings][] or model[settings][smth] it would?

|

Collectives™ on Stack Overflow

Read HTML array using javascript or jQuery

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related