How to merge arrays from different input values.?

Question

There are many text field with same name and same class with different values and each input have 1 button. I get the value from each one of the fields by clicking on each specific button. Using with Javascript. And i can put that value into array but the arrays are not merge. If i click on 1st button the specific input field value is put into the array, then i click on 3rd button the 1st value in array is removed and the new vlaue (3rd row's value) is stored in array. How can i store all of the values in same array on each click button.

Here is my code.

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

Here is my javascript

<script type="text/javascript">
//Get the value on button click
    var div = $(this).closest('div');
    var get_eupdid = div.find('input').val();

    alert(get_eupdid);

    //Push the value into array.
    var array_id = [];

    array_id.push(get_eupdid);

    console.log( "array_id: " + array_id);
</script>

prasanth · Accepted Answer · 2016-12-08 04:33:02Z

Try this :Click function not there and declare the array as a global

var array_id = [];
$('.clickme').click(function(){
   var get_eupdid= $(this).closest('div').find('input').val();
   array_id.push(get_eupdid);
   console.log( "array_id: " + array_id);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

<div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />
</div>

StackSlave · Accepted Answer · 2016-12-08 04:56:53Z

I think you should check this out. There's usually no need for <input type='hidden' /> when you can use something else to store the data. Also, it shows you how, with a little bit of CSS, unless you'd like to put something else in those <div>s, how you can do that.

$(function(){

 var possible = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'], collection = [];
 $('.clickme').each(function(i, e){
    $(e).click(function(){
      collection.push(possible[i]);
      console.log(collection);
    });
 });

 });

.clickme{
  display:block;
 }

<head>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
</head>
<body>
  <div>
    <input type='button' class='clickme' value='Get Value' />
    <input type='button' class='clickme' value='Get Value' />
    <input type='button' class='clickme' value='Get Value' />
    <input type='button' class='clickme' value='Get Value' />
    <input type='button' class='clickme' value='Get Value' />
  </div>
</body>

Mairaj Ahmad · Accepted Answer · 2016-12-08 04:31:53Z

0

You need to make array global.Right now you are creating array every time a button is clicked so only current value remain in array

 var array_id = [];
 $(document).ready(function () {
  $(".clickme").click(function () {
     var div = $(this).closest('div');
     var get_eupdid = div.find('input').val();
     alert(get_eupdid);

     //Push the value into array.
      array_id.push(get_eupdid);

      console.log("array_id: " + array_id);
    });
});

answered Dec 8, 2016 at 4:31

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to merge arrays from different input values.?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related