Unable to retrieve values from radio button groups in JavaScript

[michaelnicol]

I am currently trying to make a form for my Maze Algorithm that will take the user’s input parameters and run the maze.

Maze

I am currently having issues getting the values from the HTML.

In this image, you can see that lightning mode is set to false, but on my developer tools my code returns LightMode: undefined. This is also the case with all other radio button groups.

The code to get the radio button values can be found on line 656 of the JS.

const grabRadio = (name) => $(`input[name="${name}"]:checked`).value
// ....
let lightMode = grabRadio("lightmode");

89 of my HTML

    <div class="radio-row">
        <div>
          <input type="radio" id="input_light_true" name="lightmode" value="true">
          <label for="input_light_true">True</label>
        </div>
        <div>
          <input type="radio" id="input_light_false" name="lightmode" value="false" checked>
          <label for="input_light_false">False</label>
        </div>
      </div>

The JavaScript code is supposed to check by radio group name to grab values. However, it seems as if it is not able to get those values. I have never done this before, and am wondering what I am not doing correctly?

[jsdisco]

.value is the vanilla JS way to get the input’s value. In jQuery, you’d use the .val() method:

$(`input[name="${name}"]:checked`).val()

[lasjorg]

You can also index into the jQuery wrapped element to get the plain element.

<input value="test" type="text">

console.log($('input')[0].value) // test

Just if/when you need the plain element.

[michaelnicol]

So this would allow me to loop through all input elements on the DOM?