How to add object into an array on a button click?

Question

I have a user case scenario when there a structure like there is a parent div with class 'row'. Within that div 2 child divs are present. There is a 'Add more' link. Whenever user click one that link the whole 'inner divs' structure will append. It can happen multiple times. Now the requirement is I have to send all the values to server within a array where multiple object will hold the value of all the max and min field values. Now the problem I am currently facing is, I am only able to push the last element values in to array. Below is my javascript code

I have tried with jQuery and JavaScript. Both times I was unable to produce desired result.

var count = 0;

$('#addNew').on('click', function() {
  count++;
  var innerContent = `<div class='col-xs-6'><input type='text' id='minval'` + count + ` /></div><div class='col-xs-6'><input type='text' id='maxval'` + count + ` /></div>`
  $('.row').append(innerContent);
});

$('#save').on('click', function() {
  var value = [];
  for (var i = 0; i <= count; i++) {
    value.push({
      minval: $('#minval' + i).val(),
      maxval: $('#maxval' + i).val(),

    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-xs-6'><input type='text' id='minval0' /></div>
  <div class='col-xs-6'><input type='text' id='maxval0' /></div>
</div>
<button id='addNew'>Add More</button>

I expect the output of value

[{minval:1,maxval:2},{minval:2,maxval:3},{minval:3,maxval:4}]

Manish · Accepted Answer · 2019-09-11 04:23:25Z

1

There you go. The id you were creating for the newly added items was not generatd properly. Below is a snippet that works. You just use ${variable} to add the value of the variable inside a template literal.

var count = 0;

$('#addNew').on('click', function() {
  count++;
  var innerContent = `<div class='col-xs-6'><input type='text' id='minval${count}' /></div><div class='col-xs-6'><input type='text' id='maxval${count}' /></div>`
  $('.row').append(innerContent);
});

$('#save').on('click', function() {
  var value = [];
  for (var i = 0; i <= count; i++) {
    value.push({
      minval: $('#minval' + i).val(),
      maxval: $('#maxval' + i).val(),

    });
  }
  console.log(value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-xs-6'><input type='text' id='minval0' /></div>
  <div class='col-xs-6'><input type='text' id='maxval0' /></div>
</div>
<button id='addNew'>Add More</button>
<button id='save'>Save</button>

For more on template literals

Hope this helps :)

answered Sep 11, 2019 at 4:23

Manish

5,0963 gold badges33 silver badges47 bronze badges

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

2 Comments

user12050907 Over a year ago

Hi Manish,Thanks for the reply. However I am only using jQuery. Will the below code is also in jQuery "id='minval${count}'"

Manish Over a year ago

Yes this is actually javascript nothing to do with jQuery.. This was introduced as a standard in ES2015. This will work absolutely fine. For more details you can visit the link developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to add object into an array on a button click?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related