CODEWITHSUNDEEP
javascriptjqueryarrays
JonasSH
JonasSH

Reputation: 206

How to push all input elements to array, as seperate elements?

I am trying to push several items from an input bar into an array, as seperate items. However, I can only push them as one combined item.

So even though I am pushing 3 names into the array, they will be one element in the array instead of three individual elements.

My question differs from questions regarding pushing multiple items into an array, since my problem is more about how to push elements from input bar into array as seperate items

$("#people").on('click', '.list-group-item', function(){
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
  
  $("#button").click(function(){
  //How do I grap each individual name that has been added to input, and push it into the array?
    var allNames = [];
    allNames.push();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
  <input type="text" name="namesOfFriend" id="friendsNames" value=""  />
<button id="button">Button</button>

Upvotes: 0

Views: 781

Answers (3)

prasanth
prasanth

Reputation: 22510

Try this Array#push inside the click event.And declare the array as global .And declare the button click event in outside, not with inside people click

var allNames = [];
$("#people").on('click', '.list-group-item', function() {
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
  allNames.push(peopleName);

});
$("#button").click(function() {
  console.log(allNames)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
<input type="text" name="namesOfFriend" id="friendsNames" value="" />
<button id="button">Button</button>

Or use with split(" ") method from input to array .Its enough to create the array from input value

$("#people").on('click', '.list-group-item', function() {
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
});
$("#button").click(function() {
 var allNames = $("#friendsNames").val().trim().split(" ")
    console.log(allNames)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
<input type="text" name="namesOfFriend" id="friendsNames" value="" />
<button id="button">Button</button>

Upvotes: 3

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

Using split & concat:

$("#people").on('click', '.list-group-item', function(){
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
  
  $("#button").click(function(){
  //How do I grap each individual name that has been added to input, and push it into the array?
    var allNames = [];
    var f = $("#friendsNames").val().trim();
    allNames = allNames.concat(f.split(' '));
    console.log(allNames)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
  <input type="text" name="namesOfFriend" id="friendsNames" value=""  />
<button id="button">Button</button>

Upvotes: 1

Octo
Octo

Reputation: 29

You need to define your array outside of the click event because you always empty it when you click on it.

Additionaly you need a variable to push into the array. for example allNames.push(input);

Upvotes: 0

Related Questions