jQuery - dynamic variables?

Question

Newbie question. Given the following html.

<div id="mycontainer1" class="container">
<input type="text" class="name"/>
<input type="text" class="age"/>
</div>

<div id="mycontainer2" class="container">
<input type="text" class="name"/>
<input type="text" class="age"/>
</div>

I'm trying to create a function where I can pass an element id and an array that contains the classes of the input values I want to get.

So for example,

var inputClasses = ['name','age'];

getInputValue('.container', inputClasses);


     function getInputValue(elem, arr) {    
            $(elem).each(function() {
                // need a way to map items in array to variables

                // but how do I do this dynamically?
                var nameValue = $(this).find('.name').val();
                var ageValue = $(this).find('.age').val();

            });

cletus · Accepted Answer · 2010-05-27 00:24:00Z

2

Try:

var inputClasses = ['name','age'];

console.log(getInputValues('#mycontainer1', inputClasses));

function getInputValues(elem, arr) {
  return $(elem).find("." + arr.join(",.")).map(function(val) {
    return $(this).val();
  }).get();
}

edited May 27, 2010 at 0:24

answered May 27, 2010 at 0:03

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tvanfosson Over a year ago

I think you want find( '.' + arr.join(',.')).

tvanfosson Over a year ago

Might want to tag a get() on the end as well if a basic array instead of jQuery is desired as the output.

dmuun Over a year ago

This is a great. If I understand correctly this gets single input value at a time. Is there a way to get multiple input values on each iteration?

dmuun Over a year ago

BTW in my original post I meant to find elements by class NOT by id. should be getInputValue('.container', inputClasses);

bobsoap · Accepted Answer · 2010-05-27 00:09:31Z

1

Try this:

var inputClasses = ['name','age'];
var inputValues = getInputValue('#myContainer1', inputClasses);

 function getInputValue(elem, arr) {
     var out = [];

            for(i=0; i <= arr.length; i++) {
                var out[arr[i]] = $(elem+' .'+arr[i]).val();
            };

     return out;
}

You should now have an array inputValues that contains the values of every input field, with the class name as the index key.

For example, you could then read out the "name" value like this:

alert('Your name: '+inputValues['name']);

answered May 27, 2010 at 0:09

bobsoap

5,1547 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery - dynamic variables?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related