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!
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">
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">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>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.
var myArray=[$("#input_1").val(),$("#input_2").val()]? - why not check out the jQuery manual? this is REALLY basic stuffArray.from(document.querySelectorAll('input')).map(x => x.value);