Extract values from input fields and store in javascript array [duplicate]

248
April 01, 2017, at 04:34 AM

This question already has an answer here:

  • How to get all the values of input array element jquery [duplicate] 3 answers

I have a webpage with a few input fields containing a value:

<input type="text" id="input_1" value="Apple">
<input type="text" id="input_2" value="Pear">

I need Javascript/jQuery to extract these values and store them in an array like this:

var myArray = ["Apple", "Pear"];

Does anyone know of a way to do this?

Thanks!

Answer 1

You can use jQuery map() and get() to return array of values.

var myArray = $('input[type="text"]').map(function() { 
  return this.value; 
}).get(); 
 
console.log(myArray)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<input type="text" id="input_1" value="Apple"> 
<input type="text" id="input_2" value="Pear">

Answer 2

jQuery solution.

var arr = []; 
$('input').each(function(){ 
  arr.push($(this).val()); 
}); 
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="input_1" value="Apple"> 
<input type="text" id="input_2" value="Pear">

Or a pure js solution.

var elems = document.querySelectorAll('input[type="text"]'), 
    res = Array.from(elems).map(v => v.value); 
    console.log(res);
<input type="text" id="input_1" value="Apple"> 
<input type="text" id="input_2" value="Pear">

Answer 3

Use document.querySelectorAll and Array#map:

var result = [].map.call(document.querySelectorAll('input'), function (e) { 
  return e.value 
}) 
 
console.log(result)
<html> 
   <body> 
      <input type="text" id="input_1" value="Apple"> 
      <input type="text" id="input_2" value="Pear"> 
   </body> 
</html>

Answer 4

You have to loop through the input tags:

var data = []; 
var inputs = document.getElementsByTagName('input'); 
for(var i=0; i< inputs.length; i++) 
{ 
  data.push(inputs[i].value); 
} 
console.log(data);
<input type="text" id="input_1" value="Apple"> 
<input type="text" id="input_2" value="Pear">

If you use JQuery

    var data = []; 
    $('input').each(function(){ 
      data.push($(this).val()); 
    }); 
    console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="input_1" value="Apple"> 
    <input type="text" id="input_2" value="Pear">

Optimized JQuery:

        var data = []; 
        $(":text").each(function(){ //only searches for input type="text" 
          data.push($(this).val()); 
        }); 
        console.log(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="input_1" value="Apple"> 
<input type="text" id="input_2" value="Pear">

UPDATE

I would strongly recommend you to use a common class in all your input elements and then loop through them like $('.the_class') as it is even more optimised.

READ ALSO
Hidden Elements Retaining Position with Sticky Nav

Hidden Elements Retaining Position with Sticky Nav

I am using the Bootstrap NavbarI have the Navbar positioned absolute bottom then I'm using jQuery to make the Navbar stick to the top on scroll

221
Setting SVG path to absolute position of viewport

Setting SVG path to absolute position of viewport

I have an animated SVG that i'm using to outline some contentWhat I would like to do is have it's paths behave similar to it's div container and have each path stretch and shrink when appropriate

348
jquery css selector to match elements with id contains specific text after the last dot

jquery css selector to match elements with id contains specific text after the last dot

I need to write css selector for jquery that matches elements with id that contains some text after the last dotSomething that resembles $(div[id*='cow']) - but stronger because I need it to match only if the text is after last dot

326
jQuery elevateZoom work only when I put an alert() before

jQuery elevateZoom work only when I put an alert() before

I have this code to launch jQuery elevateZoom but, only works if I put an alert() before

293