Gotrekk Gotrekk - 7 months ago 11
Javascript Question

Getting values from input text boxes with different classes using wildcard

after googling, searching on the forum and trying many different alternatives, i wasn't able to find a solution to this, even tho it looks so simple!
I need to get the values of different classes starting with the same string

<div id="home"></div>
<input type="text" class="var_in_1">
<input type="text" class="var_in_2">

$(document).on('change', '[class^="var_in"]', function () {
$("#home").append($('[class^="var_in"]').val() + " --- ");
});


I created a fiddle to better explain my issue:
http://jsfiddle.net/5zdpq1wL/
as you can see, it gets the first value only!!

Answer

Try this:

var allValues = $('[class^="var_in"]').map(function(){
    return this.value;
}).get(); //or toArray()

http://jsfiddle.net/4o1xg2qw/

As stated in the comments, you need to iterate all elements that match your selector.

To add your --- separator, just join the values:

console.log(allValues.join(' --- '));