How to know which radio is checked from a fieldset

Question

I have the following code:

    <fieldset id="dificuldade">
        <legend>Dificuldade:</legend>
        <input type="radio" name="dificuldade" value="facil"> Fácil </input>
        <input type="radio" name="dificuldade" value="medio"> Médio </input>
        <input type="radio" name="dificuldade" value="dificil"> Difícil </input>
    </fieldset>

    <fieldset id="tipo">
        <legend>Tipo de jogo:</legend>
        <input type="radio" name="Tipodejogo" value="somar"> Somar </input>
        <input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
        <input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
        <input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
    </fieldset>

    <input type="button" value="Começa" id="button" ></input>
</form>

and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.

the Javascript code that is on this http://jsfiddle.net/3bc9m/15/ — Cláudio, Nov 02 '12 at 15:27

Spectre87 · Accepted Answer · 2012-11-02T15:56:23.380

2

Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.

So this code that was supposed to display the selected values wasn't working:

document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;

The part that actually retrieves the selected values is working fine.

Just add those two elements to the page, like this:

<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>

An updated jsFiddle can be found here.

EDIT

If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:

document.getElementById('button').onclick = function() {

    var dif = document.getElementsByName('dificuldade');
    var tip = document.getElementsByName('Tipodejogo');

    var difValue;
    for (var i = 0; i < dif.length; i++) {
        if (dif[i].type === "radio" && dif[i].checked) {
            difValue = dif[i].value;
        }
    }

    var tipValue;
    for (var i = 0; i < tip.length; i++) {
        if (tip[i].type === "radio" && tip[i].checked) {
            tipValue = tip[i].value;
        }
    }

    document.getElementById('output').innerHTML = difValue;
    document.getElementById('output2').innerHTML = tipValue;
};

An updated jsFiddle is here.

edited Nov 02 '12 at 15:56

answered Nov 02 '12 at 15:47

Spectre87

2,374
1
24
37

You're code is working fine on the jsfiddle, but it isn't showing up on my page, it just shows "Selected Values:" and doesn't print any of the output values. I am only allowed to use 1 page, so i've been using DOMTAB : http://onlinetools.org/tools/domtabdata/ to alternate between tabs, is it the reason for why i'm not getting any output? – Cláudio Nov 02 '12 at 16:11
@Cláudio: I wouldn't think that DOMTab would be causing a problem, but it's hard to say for sure. Running a debugger on it might give you some insight. – Spectre87 Nov 02 '12 at 16:23
http://jsfiddle.net/3bc9m/42/ I've tried changing your code so it gives an error when i don't choose both options, but seems like it shows the alert even if i pick both. I've never used a debugger, which one should i use? – Cláudio Nov 02 '12 at 16:33
@Cláudio: It was showing the alert even when you picked both because of a typing error. This one should work: [http://jsfiddle.net/3bc9m/43/](http://jsfiddle.net/3bc9m/43/). For the debugger, if you're using Chrome, use the Chrome developer tools that come with it (press shift+ctrl+i, and then go to the Sources tab). For FireFox, FireBug is a good option. If you're using IE, the IE developer tools will work fine (press F12). It's really up to you which one you use. I use the Chrome developer tools most of the time. – Spectre87 Nov 02 '12 at 16:47
I tried using Firebug, but i was kind of lost, so I decided to download chrome and it gave me this "Uncaught TypeError: Cannot set property 'onclick' of null " – Cláudio Nov 02 '12 at 17:22
@Cláudio: Ah, I think I know what's going on. Is your script at the top of the page? If yes, either wrap the whole click handler in `window.onload = function() { // click handler here };` or move the script to the bottom of the page, right before the closing `
` tag. For reference, if you are able to use jQuery in the future, use `$(document).ready(function() { ... });` or `$(function() { ... });` instead.
– Spectre87 Nov 02 '12 at 17:36
Yes it was at the top of the page, I've now used window.onload = function () and it is working. I now have the 2 output, since I'll have to use them in new functions, for example for each combination i will have to call a different function, how can i insert them in the newly created functions? And thanks for your help and patience, I've been trying to create this function for pratically a day and you just saved my life – Cláudio Nov 02 '12 at 17:48
@Cláudio: Just use a combination of `if` and `else if` statements, and call your external functions where appropriate. – Spectre87 Nov 02 '12 at 19:01
do you mean like this? http://jsfiddle.net/AD8gr/2/ , also how do i make the game show up in that div once the player picks the game type and difficulty? DOMTAB needs to have a list so it can work, i've included that list here, I don't know if I am making myself clear – Cláudio Nov 03 '12 at 00:12
@Cláudio: Yes, that's the idea. I'm happy to help, but I think these questions have gone beyond the scope of the original question. If you need more help, I would suggest starting a whole new question. – Spectre87 Nov 04 '12 at 12:26

score -1 · Answer 2 · edited May 23 '17 at 11:55

-1

Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.

How can I check whether a radio button is selected with JavaScript?

Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?

edited May 23 '17 at 11:55

Community

1
1

answered Nov 02 '12 at 15:25

AceCorban

2,023
1
15
15

Not really, I'm just really confused and don't know where to start. The page you sent me is gold, thank you. I am using fieldsets for style purposes, i've edited and tried to call it by name and even have a var to see if it they are all selected but it's returning false every time: http://jsfiddle.net/3bc9m/35/ – Cláudio Nov 02 '12 at 15:46

How to know which radio is checked from a fieldset

2 Answers2