CODEWITHSUNDEEP
javascripthtml
SamsyTheUnicorn
SamsyTheUnicorn

Reputation: 135

How can I get my Javascript to recognise which radio button option is selected in my HTML?

I'm working on making a small text adventure game over the next week utilising just HTML, CSS, and JavaScript, however I've ran into problems from the get go as I'm trying to have the player be given a selection of choices using radio buttons, so they select a choice, then hit submit, and based on the choice, a number of things could happen. However I have no idea how to actually achieve this function...

I've had a look for tutorials or examples featuring similar questions as mine, however none of them have helped all too much.

  <form>
    <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
    <button type="button" onclick=choiceA()> Choose </button>
  </form>

I'd like to be able to have the used check one of those options, then be able to hit the "Choose" button and continue on their way, having their choice logged in JavaScript for reference later.

How can I get my Javascript to recognise which radio button option is selected in my HTML?

Upvotes: 2

Views: 312

Answers (3)

BlizZard
BlizZard

Reputation: 579

You can use this simple function and get your objective fullfiled. I'm taking the value from radio button whenever the user clicks on any btn, then that value is used to do operation according to the selection in choiceA();

<form>
    <input type="radio" name="choice" onclick="getRadioValue('A1')" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A2')" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A3')" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
<button type="button" onclick=choiceA()> Choose </button>

In js. create a function with the same name ie. getRadioValue(param)

var globalSelectedValue = 'A1';
function getRadioValue(param){
    globalSelectedValue = param;
    console.log(globalSelectedValue);
}

function choiceA(e){
    doSomething(globalSelectedValue);
 }

Upvotes: 0

brk
brk

Reputation: 50326

You can use FormData. For that first give an identification to the form.In this example it is done with name attribute. You can also use id

Secondly use get method to get the value of selected form

function choiceA(e) {
  e.preventDefault();
  var form = document.forms.namedItem("fileinfo");
  var formData = new FormData(form);
  console.log(formData.get('choice'))
  }
<form name='fileinfo'>
  <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
  <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
  <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
  <button type="submit" onclick=choiceA(event)> Choose </button>
</form>

Upvotes: 2

Khagesh
Khagesh

Reputation: 191

you can add them inside a div

<div id="collection">
<label>Value1
    <input name="myradio" type="radio" value="value1" />
</label>
<label>Value2
    <input name="myradio" type="radio" value="value2" />
</label>

and jquery

    $(function () {
    $('#collection input[type=radio]').change(function(){
      alert ( $(this).val() ) 
      //do your activity
      })
})

Upvotes: 0

Related Questions