Can't get all array key and values into array

Question

When i tried to see all input values, its always showing last ones.

function addInput() {
   $('.addElement').append('<label>Sağlık Etkisi</label><input  id="health" name="health[]" type="text" class="form-control message">');
   $('.addElement').append('<label>Yaşam Tarzı Önerisi</label><input id="lifeStyle" name="lifeStyle[]" type="text" class="form-control message">');
   $('.addElement').append('<label>Öneriler</label><input id="advice" name="advice[]"  type="text" class="form-control message">');

}

I'm appending 3 input to my form.

$('#test').submit(function(e) {
    e.preventDefault();
    var text = [];

    $("input[name='health[]']").each(function(index, item) {
        text['health'] = item.value;
    });

    $("input[name='lifeStyle[]']").each(function(index, item) {
        text["lifeStyle"] = item.value;
    });

    $("input[name='advice[]']").each(function(index, item) {
        text["advice"] = item.value;
    });

I did text[index]['health'], and this gave me error too.

this code on output, always giving me last 3 input value. Sorry for my english.

text['health'] = item.value; < that just overwrites the last value. You want an array or a comma seperated list? — epascarello
– epascarello, Commented Sep 24, 2018 at 14:44
@epascarello Thanks to Rory answer it's works now ! Also thanks for your answer too. — Cagrison
– Cagrison, Commented Sep 24, 2018 at 15:10

Rory McCrossan · Accepted Answer · 2018-09-24 15:07:05Z

2

The issue is because you're overwriting the values of the health, lifeStyle and advice properties in every iteration, hence on the final values in each loop are accessible.

One solution to fix this would be to build arrays of the input values and assign those to the properties instead:

$('#test').submit(function(e) {
  e.preventDefault();

  var healthVals = $("input[name='health[]']").map(function() { return this.value; }).get();
  var lifestyleVals = $("input[name='lifeStyle[]']").map(function() { return this.value; }).get();
  var adviceVals = $("input[name='advice[]']").map(function() { return this.value; }).get();

  var text = [];
  text['health'] = healthVals;
  text['lifeStyle'] = lifestyleVals;
  text['advice'] = adviceVals;
});

Also note that the fact you're looping over the appended elements implies that there can be multiple copies of them. In which case you should remove the id attribute from the HTML you append, as it will result in duplicates which is invalid.

edited Sep 24, 2018 at 15:07

answered Sep 24, 2018 at 14:45

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

Cagrison Over a year ago

hello. Thanks for your answer. i'm getting empty value because of item not defined. i did .map(function(item), isn't that correct? Also thanks for your warning about id.

Rory McCrossan Over a year ago

Apologies, item should have been this. I've updated the answer for you

Cagrison Over a year ago

It is work very well now! Thanks for your big help, also i understand very well.

Collectives™ on Stack Overflow

Can't get all array key and values into array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related