issue recieving element value when called from form

Question

I would like to be able to store the radio input into a variable so I can manipulate it later with animations in the program. However I am only receiving undefined when I console log it. I am not sure as to where I am messing up(I hope I was able to explain it well)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lab4.css">
    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <title>Lab 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <header>
        <h1>JQuery</h1>
    </header>
    <form action="/actions" id="dudeidk">
        
        <input type="radio" id="hide" name="choices" value="hide">
        <label for="options">Hide</label>
        
        <input type="radio" id="show" name="choices" value="show">
        <label for="options">Show</label>

        <input type="radio" id="toggle" name="choices" value="toggle">
        <label for="options">Toggle</label>

        <input type="radio" id="fadeOut" name="choices" value="fadeOut">
        <label for="options">Fade Out</label>

        <input type="radio" id="fadeIn" name="choices" value="fadeIn">
        <label for="options">Fade In</label>

        <input type="radio" id="slideUp" name="choices" value="slideUp">
        <label for="options">Slide Up</label>

        <input type="radio" id="slideDown" name="choices" value="slideDown">
        <label for="options">Slide Down</label>

        <input type="radio" id="slideTog" name="choices" value="slideTog">
        <label for="options">Slide Toggle</label>

        <input type="radio" id="fadeTo" name="choices" value="fadeTo">
        <label for="options">Fade Out</label><br>

        
        <button type="submit">Apply</button>
        <!-- <button id="fadeIn">Fade In</button>
        <button id="fadeTog">Fade Tog</button> -->



    </form>
    <div id="content">
        <img src="http://ww1.prweb.com/prfiles/2014/01/29/11536011/Dogecoin-NASA.png" alt="">
        <p><b>Will it go to the moon</b></p>
    </div>

    <script src="lab4.js"></script>
</body>
</html>

JavaScript

const dudeidk = document.querySelector('#dudeidk');
dudeidk.addEventListener('submit', function(e){
    
    // const radInp = document.querySelectorAll('radio')
    console.log(dudeidk.elements.value)
    e.preventDefault();
});

Does this answer your question? [How to get value of selected radio button?](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) Form does not have value property. invidual inputs does, etc. — ikiK, Feb 20 '21 at 23:28

score 0 · Answer 1 · answered Feb 21 '21 at 02:44

You can iterate over dudeidk.elements and get the value of the checked radio button.

const dudeidk = document.querySelector("#dudeidk");
dudeidk.addEventListener("submit", function(e) {
  [].forEach.call(dudeidk.elements, function(ele) {
    if (ele.checked) {
      console.log(ele.value); // get the value
    }
  });
  e.preventDefault();
});

Here is a working stackblitz link

issue recieving element value when called from form

1 Answers1