Loop through multiple inputs and save the answer to a variable using jQuery

Question

So far, I have:

$('.the-inputs input').each(function() {
    userAnswer = $(this).val();
});

However, if I console.log this out, it comes out on separate lines (is this an array?) I would like it as a string.

So, if the user enters "Hello" "World" in the two inputs, I want the variable userAnswer = "Hello World".

I also need the variable accessible outside the function. Am I right in leaving off the var to achieve this?

The each function of a jQuery object will run the callback function you define once for every element that matches the selector you input. That is why you received separate lines in the console log — DGS
– DGS, Commented Aug 23, 2013 at 8:45
the var declaration only determines wether its a global variable or only in the functionscope. Either way, each illitaration of the each-loop will overwrite it to $(this).val() — Martijn
– Martijn, Commented Aug 23, 2013 at 8:56
Thanks for clearing up the var thing. I completely get that now. Also, I know what the jQuery is doing, I just don't know how to achieve what I want... — jpsear
– jpsear, Commented Aug 23, 2013 at 8:59

Peter Mortensen · Accepted Answer · 2013-09-20 07:09:44Z

6

You can use .map() to solve this:

var userAnswer = $('.the-inputs input').map(function() {
    return $(this).val();
}).get().join(' ');

edited Sep 20, 2013 at 7:09

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 23, 2013 at 8:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

7 Comments

Jonathan Römer Over a year ago

simple and effective.

Martijn Over a year ago

What would be the advantage of map vs each? I think the each() has a bit more readability, but I asume it has something to do with the way jQuery handles them.

jpsear Over a year ago

Hmmm, this didn't work for me. I'm sure it's an effective way of doing it, but I get Uncaught TypeError: Object [object Object] has no method 'join' in the console...

Clyde Lobo Over a year ago

@jpsear : check now. I have edited the answer. You have to call the .get() before calling the .join() function. Its mentioned in the documentation link that is mentioned in the answer . Demo jsfiddle.net/yrdFh

jpsear Over a year ago

Thanks, that indeed works well. What advantage does this have over the answer below (also works well)?

|

Artek Wisniewski · Accepted Answer · 2013-08-23 09:05:19Z

1

var userAnswer = '';

$('.the-inputs input').each(function() {
 userAnswer += $(this).val() + ' '; // add to string
});

userAnswer = $.trim(userAnswer);

console.log(userAnswer);

edited Aug 23, 2013 at 9:05

answered Aug 23, 2013 at 8:50

Artek Wisniewski

7975 silver badges13 bronze badges

4 Comments

jpsear Over a year ago

This has worked perfectly apart from one thing, the console brings up undefined right before the string. So if I enter "foo" and "bar" into the inputs, I get undefinedfoo bar in the console... Why is this?

Martijn Over a year ago

because in the first loop userAnswer is undefined (it has not been giving an value), and the other answers will stick to that. To fix it var userAnswer = '';. Now the first value will be an empty string

jpsear Over a year ago

Interesting you added the $.trim method. Actually, I wanted the space between the answers, but it's good to know how to join them. Thanks!

Artek Wisniewski Over a year ago

The space between the anwsers will stay, I've added trim to remove last space that was added on last anwser.

Collectives™ on Stack Overflow

Loop through multiple inputs and save the answer to a variable using jQuery

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related