display the value of all selected radio buttons on a form

Question

I have multiple radio buttons generated in a php loop which looks something like this

while(){

     <input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team1'].' " onclick="return disp()""><span>'.$team1.'</span>

   <input type="radio" id="picks'.$x.'"  name="picks['.$x.']" value="'.$row['team2'].' "onclick="return disp()""><span>'.$team2.'</span>

    <input type="radio" name="picks'.$x.'" value="draw" onclick="return disp()">

}

What I want to do

Display all selected radio buttons in a div on the bottom of page

My Code

var elmnts = document.getElementById("makePicksForm").elements
var lngth = document.getElementById("makePicksForm").length;
var div = document.getElementById("dispPicks");

for (var x = 0; x < lngth; x++) {
    if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
        div.innerHTML = elmnts[x].value;
    }
}

My Problem

Only the value of first selected radio button is displayed in div, other radio buttons are ignored

My Question

Any idea how I can modify my javascript to display the values of ALL selected radio buttons?

Answer 1

Since you've tagged your question with jQuery, here is a jQuery solution. Run the snippet to see it work:

 $(document).ready(function () { $(':radio').change(function (e) { //clear the div $('#dispPicks').html(''); //update the div $(':radio:checked').each(function (ind, ele) { $('#dispPicks').append($(ele).val() + '<br/>'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="radio" name="foo" value="foo1" /> <input type="radio" name="foo" value="foo2" /> <input type="radio" name="foo" value="foo3" /> <br/> <input type="radio" name="bar" value="bar1" /> <input type="radio" name="bar" value="bar2" /> <input type="radio" name="bar" value="bar3" /> <br/> <input type="radio" name="wow" value="wow1" /> <input type="radio" name="wow" value="wow2" /> <input type="radio" name="wow" value="wow3" /> <div id="dispPicks"></div> 

Answer 2

You're using lngth in your for loop, but that's defined by getting an element by ID which should only be 1 element. Your loop will only run once that way...

Assuming the element with ID makePicksForm contains all your radio buttons, you need to get the length of the elements:

var elmnts = document.getElementById("makePicksForm").elements;
var div = document.getElementById("dispPicks");

for (var x = 0; x < elmnts.length; x++) {
    if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
        div.innerHTML += elmnts[x].value;
    }
}

Also, you need to add the value to the innerHTML property, using +=

as a side note: your PHP loop is creating duplicate ID's, which will result in failures in your javascript code if you need to reference the elements...

Answer 3

Another jQuery-Fiddle

<input type="radio" id="bob" name="boys" value="Bob"><label for="bob">Bob</label><br>
<input type="radio" id="jim" name="boys" value="Jim"><label for="jim">Jim</label><br>
<input type="radio" id="pete" name="boys" value="Pete"><label for="pete">Pete</label><br>
<input type="radio" id="mary" name="girls" value="Mary"><label for="mary">Mary</label><br>
<input type="radio" id="jane" name="girls" value="Jane"><label for="jane">Jane</label><br>
<input type="radio" id="susan" name="girls" value="Susan"><label for="susan">Susan</label>

<h3><span id="boy">?</span> and <span id="girl">?</span></h3>

$("input[name=boys]").click(function () {
    $("#boy").text($(this).val());
});

$("input[name=girls]").click(function () {
    $("#girl").text($(this).val());
});