How to evaluate and generate a result from a html form using javascript

Question

as the title says i need to create a game but my problem is that I don't know how to read the radio buttons using javascript and based on the options, it generates a scenario with the game mode with the difficulty the player picks. I am using one text input for the nickname and 2 fieldsets like this one for the player to select the type of the game and difficulty.

            <fieldset>
            <legend>Dificuldade:</legend>
                    <input type="radio" name="dificuldade" value="easy"> easy </input>
                    <input type="radio" name="dificuldade" value="medium"> medium </input>
                    <input type="radio" name="dificuldade" value="hard"> hard </input>
            </fieldset>

We're going to need more details on how the form is sent and evaluated. Plus any information that would hinder a form from sending. Try to change the title to a specific problem and not a subject area? — Nate-Wilkins
– Nate-Wilkins, Commented Nov 2, 2012 at 0:49
That's my problem i don't know how do I send the form and evaluate it using javascript so it can generate a scenario — Cláudio
– Cláudio, Commented Nov 2, 2012 at 0:57
There are a couple of different ways ajax, post, submit, json... I would go with something simple with javascript forms first. W3Schools is a great place for javascript tutorials and for forms you can even check this out: tizag.com/javascriptT/javascriptform.php — Nate-Wilkins
– Nate-Wilkins, Commented Nov 2, 2012 at 1:01
Hey, i will definitely check that out, i should of said on the post but i can only use html+css+javascript and probably a bit of jquery on this work — Cláudio
– Cláudio, Commented Nov 2, 2012 at 1:05

LukeGT · Accepted Answer · 2012-11-03 12:10:27Z

2

I suggest you use jQuery, it makes life so much easier:

$('[name=dificuldade]:checked').val()

JSFiddle: http://jsfiddle.net/3bc9m/

Otherwise you would have to go through each of the radio buttons in the DOM, and check their checked property. When you find the one with checked === true, you can then read its value property. Like this:

var fieldset = document.getElementById('difficuldade'); // You'd need to set an ID to the fieldset element
var curr = fieldset.firstChild;

while (curr != null) {
    if (curr.checked) {
        break;
    }
    curr = curr.nextSibling;
}

curr.value; // This is your selected value

JSFiddle: http://jsfiddle.net/3bc9m/1/

As Nate mentioned, make sure the DOM is ready, otherwise this will not work. This means that all of your code should be run on the onload event of the body element. See this for more details: http://www.w3schools.com/jsref/event_body_onload.asp

edited Nov 3, 2012 at 12:10

answered Nov 2, 2012 at 0:58

LukeGT

2,3521 gold badge21 silver badges20 bronze badges

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

5 Comments

Cláudio Over a year ago

Hello, thanks for answering, i think I have tried the 2nd method you said and used an alert at the end of the for cycle to see what it saved, but it didn't return anything

LukeGT Over a year ago

I made an edit to demonstrate how you would achieve this with vanilla Javascript. Do consider learning jQuery though, you can see how much pain it saves you.

Cláudio Over a year ago

Sorry i didn't came be earlier, but it was really late already here. I have another question, what do you mean by making sure DOM is ready too?

Cláudio Over a year ago

jsfiddle.net/3bc9m/11 I inserted my form on jsfiddle and tried to modify your function so it can validate my 2 fieldset , but it seems like it isn't working, what am i doing wrong? And how i can i store the username since i will only use it when I am printing the results

LukeGT Over a year ago

I corrected some of your mistakes in the fiddle here: jsfiddle.net/3bc9m/45. There were a few typos, and you were missing the id="output" and id="output1" elements. However, to clean things up a bit, you should really create a method that takes a fieldset id and returns the selected radio button that lies within it. As far as storing the username goes, look into the localStorage object: w3schools.com/html/html5_webstorage.asp

Collectives™ on Stack Overflow

How to evaluate and generate a result from a html form using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related