For loop with jQuery

Question

I am creating a survey with a html form with radio buttons.

The user answers 5 questions, and hits submit button that calls a javascript, where I want a loop to get the value from each radio button, and put it all together into one variable.

My problem is, that I cant figure out the correct way to use "i" in the variable called currentVal.

The result I am looking for, should be something like a variable with: "val1, val5, val3, val1, val4"

Totally new at this, so if you can keep the answer noobfriendly ;)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function()
    {
        $('#check').click(function()
        {
            for (var i=0; i < 5; i++)
            {
                var currentQuestion = i;
                var currentVal = $("input:radio[name="+ i +"]:checked").val();
            }

            document.write(currentVal);

        });
    })

</script>
</head>

<body>
<form name="form" method="post" action="">
Question 1<br/>
<input type="radio" name="1" value="val1"/> Ans1
<input type="radio" name="1" value="val2"/> Ans2
<input type="radio" name="1" value="val3"/> Ans3
<br/><br/>
Question 2<br/>
<input type="radio" name="2" value="val1"/> Ans1
<input type="radio" name="2" value="val2"/> Ans2
<input type="radio" name="2" value="val3"/> Ans3
<br/><br/>
Question 3<br/>
<input type="radio" name="3" value="val1"/> Ans1
<input type="radio" name="3" value="val2"/> Ans2
<input type="radio" name="3" value="val3"/> Ans3
<br/><br/>
Question 4<br/>
<input type="radio" name="4" value="val1"/> Ans1
<input type="radio" name="4" value="val2"/> Ans2
<input type="radio" name="4" value="val3"/> Ans3
<br/><br/>
Question 5<br/>
<input type="radio" name="5" value="val1"/> Ans1
<input type="radio" name="5" value="val2"/> Ans2
<input type="radio" name="5" value="val3"/> Ans3

<input type="button" value="Test" id="check" />
</form>
</html>

Your first problem is that your first name group is 1, while your index starts at 0. — Liftoff
– Liftoff, Commented Nov 26, 2013 at 10:05
Your second problem is scope. You declare currentVal in your for-loop but then try to use it outside of your for-loop. — Liftoff
– Liftoff, Commented Nov 26, 2013 at 10:07
The third problem is that you are using document.write() after the page has loaded. @David - Declaring the variable in the loop is messy, but it will be accessible anywhere in the containing function because JavaScript doesn't have block scope... — nnnnnn
– nnnnnn, Commented Nov 26, 2013 at 10:20
@nnnnnn Really? Good to know. It's still bad practice, but that's good to know. — Liftoff
– Liftoff, Commented Nov 26, 2013 at 10:21

A.T. · Accepted Answer · 2013-11-26 10:17:53Z

1

try this...

$('#check').click(function()
        {
            var temp ='';
            $(':radio').each(function(){
                if($(this).is(':checked'))
                  {
                      temp += $(this).val() + ',';
                  }
                });
            alert(temp.slice(0, -1));
        });

answered Nov 26, 2013 at 10:17

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

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

Comments

maxdev · Accepted Answer · 2013-11-26 11:30:59Z

0

First, to append all the strings to a commaseperated value, do this:

var result = "";
for (var i = 0; i < 5; i++) {
    if(result.length > 0) {
        result += ",";
    }
    result += $("input:radio[name=" + (i + 1) + "]:checked").val();
}
document.write(result);

The imho best solution would be to add a class (for example 'myForm') to your form and use jQuery's each() function:

var result = "";
$.each($(".myForm input:radio"), function(index, var) {
    if(result.length > 0) {
        result += ",";
    }
    result += var.val();
});
document.write(result);

edited Nov 26, 2013 at 11:30

answered Nov 26, 2013 at 10:12

maxdev

2,6161 gold badge27 silver badges53 bronze badges

4 Comments

nnnnnn Over a year ago

Your opening statement about the scope of currentVal is wrong: var creates variables with function scope, not block scope. Your first block of code is a step in the right direction, but still not right because i would need to start at 1, not 0, and both the for and $.each() versions are adding commas to the beginning of the result string rather than in between the values.

maxdev Over a year ago

Corrected, i must have been a little confused. :)

RedHawkDK Over a year ago

Thx a lot :D So how would the correct code look like ? If I was to use the $.each() version (im really really new to this)

maxdev Over a year ago

Yeah, you could use both version, they both work. But try to understand what really happens here. The jQuery syntax is a little complicated (but the code is more flexible), but the first code should be clear. ;)

Collectives™ on Stack Overflow

For loop with jQuery

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related