Javascript - ading a checked radio input on a variable after submitting the form

Question

I am trying to create a rock paper scissors game.

The user choice must populate as a variable using a form with a radio button.

When I click on submit I would like to have the radio button checked to be passed as a variable. How can I get the users choice?

<div id="global">
    <h1>Jeu Pierre Feuille Ciseau</h1>
     <h3>Choisissez Pierre, Feuille ou Ciseaux:</h3>
     <div>
         <input type="radio" id="pierre" name="game" value="pierre" checked>
         <label for="pierre">Pierre</label>
    </div>
    <div>
        <input type="radio" id="feuille" name="game" value="feuille">
        <label for="pierre">Feuille</label>
    </div>
    <div>
        <input type="radio" id="ciseaux" name="game" value="ciseaux">
        <label for="pierre">Ciseaux</label>
    </div>
    <button id="submit">Submit</button>
</div>

 <script type="text/javascript">
    window.document.getElementById("submit").onclick = function(){
    }
</script>

Possible duplicate of [How to get the selected radio button’s value?](https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value) — full-stack, Oct 18 '19 at 18:15

score 0 · Answer 1 · answered Oct 18 '19 at 18:14

This would be something simple with jQuery and using $("input[name='game']:checked").val()

 $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='game']:checked").val();
            if(radioValue){
                alert("Value - " + radioValue);
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="global">
    <h1>Jeu Pierre Feuille Ciseau</h1>
     <h3>Choisissez Pierre, Feuille ou Ciseaux:</h3>
     <div>
         <input type="radio" id="pierre" name="game" value="pierre" checked>
         <label for="pierre">Pierre</label>
    </div>
    <div>
        <input type="radio" id="feuille" name="game" value="feuille">
        <label for="pierre">Feuille</label>
    </div>
    <div>
        <input type="radio" id="ciseaux" name="game" value="ciseaux">
        <label for="pierre">Ciseaux</label>
    </div>
    <input type="button" value="Submit">
    
</div>

score 0 · Answer 2 · answered Oct 18 '19 at 18:18

You can do this by iterating through the radio buttons and finding the element that has been checked. From that point you can do whatever you like with the value

<div id="global">
<h1>Jeu Pierre Feuille Ciseau</h1>
 <h3>Choisissez Pierre, Feuille ou Ciseaux:</h3>
 <div>
     <input type="radio" id="pierre" name="game" value="pierre" checked>
     <label for="pierre">Pierre</label>
</div>
<div>
    <input type="radio" id="feuille" name="game" value="feuille">
    <label for="pierre">Feuille</label>
</div>
<div>
    <input type="radio" id="ciseaux" name="game" value="ciseaux">
    <label for="pierre">Ciseaux</label>
</div>
<button id="submit">Submit</button>

window.document.getElementById("submit").onclick = function(){

var radioButtons = document.getElementsByName('game');

for (var i = 0, length = radioButtons.length; i < length; i++){
  if (radioButtons[i].checked){
      // do whatever you want with the checked radio
      alert(radioButtons[i].value);

      // only one radio button can be checked so break the loop
      break;
  }
}

}

Here is a codepen to try it out: https://codepen.io/jpcobalt/pen/qBBqWyd

It works :) thank you. I have an additional question while I click on a radio button mutliple time the value on the variable changes. How can I make sure that id you keep clicking on the radio button the variable stay the same. Once he choose the value how can I "block" the radiobutton" ? Sorry if i'm not clear. — Mln954, Oct 18 '19 at 19:28

Javascript - ading a checked radio input on a variable after submitting the form

2 Answers2