Javascript and radio buttons help

[sikuneh]

I have been having some trouble with my javascript that involves radio buttons. I have no idea how to check if either radio A or radio B have been selected.

My guess:
JS

<script type="text/javascript">
function validate(radios) {
 var confirm = document.getElementsByName(radios).value;
 var button = document.getElementById("button");
 button.disabled = true;
 if(confirm == '0')
  button.disabled = false;
 else
  button.disabled = true;
}
</script>

<form action="#" method="post" onchange="validate('confirm')">
No <input type="radio" name="confirm" value="0" /><br />
Yes <input type="radio" name="confirm" value="1" /><br />
<input type="submit" value="Go" id="button" />
</form>

 

[kbjradmin]

// these are your radio buttons
var
radio1 = document.getElementById('radio1'),
radio2 = document.getElementById('radio2');
// check if one of them is selected
var which = (radio1.checked) ? 'radio1' : 'radio2';
// tell you which is selected
alert(which);

i think that's right.

 

[as4s1n]

So if you were to try to check if either were selected would this work?

var
radio1 = document.getElementById("radio1");
radio2 = document.getElementById("radio2");
check1 = (radio1.checked) ? 'radio1' : false;
check2 = (radio2.checked) ? 'radio2' : false;
error = document.getElementById("error");
if(check1 != false && check2 != false)
error.innerHTML = "";
else
error.innerHTML = "Please choose one.";

 

[kbjradmin]

yes, that should work; however, a caution, on the second line, I ended it with a comma (, ) not a semi-colon(; ). the comma tells it that the "var" statement isn't over, the semi-colon, though, ends the "var". This can have bad effects depending on what the rest of your code looks like. I would suggest changing that back to a comma.

 

[as4s1n]

Oh, I guess I overlooked that, Duly noted.

 

[misson]

Note that you can also get inputs via the form element, which is helpful if you have more than two radio buttons in a group.

<form name="colorForm">
  <input type="radio" name="color" value="red" id="color_red"/><label for="color_red">Red</label>
  <input type="radio" name="color" value="green" id="color_green"/><label for="color_green">Green</label>
  <input type="radio" name="color" value="blue" id="color_blue"/><label for="color_blue">Blue</label>
</form>
<script type="text/javascript">
    var colors = document.forms.colorForm.elements.color,
        colorElt;
    var i;
    for (i=0; i < colors.length; ++i) {
        if (colors[i].checked) {
            colorElt = colors[i];
            break;
        }
    }
</script>

You can also track which radio button is selected by adding change or click handlers to the radio buttons.

<form name="colorForm">
  <input type="radio" name="color" value="red" id="color_red"/><label for="color_red">Red</label>
  <input type="radio" name="color" value="green" id="color_green"/><label for="color_green">Green</label>
  <input type="radio" name="color" value="blue" id="color_blue"/><label for="color_blue">Blue</label>
</form>
<script type="text/javascript">
    function trackSelectionOf(watcher, inputs) {
        function createSelectionTracker(elt) {
            return function () {
                watcher.selected[elt.name] = elt;
            }
        }

        if (typeof watcher.selected == 'undefined') {
            watcher.selected = {};
        }
        var tracker;
        for (i=0; i < inputs.length; ++i) {
            /* Note: you'll have to simulate addEventListener in IE using attachEvent, 
               or use a library that does it for you
             */
            inputs[i].addEventListener('change', 
                                       tracker=createSelectionTracker(inputs[i]),
                                       false);
            if (inputs[i].checked) {
                tracker();
            }
        }
    }

    function trackSelection(form) {
        var done={},
            input;
        for (i=0; i < form.elements.length; ++i) {
            input = form.elements[i];
            if (!done[input.name] && input.type == 'radio') {
                done[input.name] = true;
                trackSelectionOf(form, form.elements[input.name]);
            }
        }
    }
    trackSelection(document.forms.colorForm);

  /* current selection for colorForm.color can be accessed as 
     document.forms.colorForm.selected.colors
   */
</script>