0

So im working on creating a form on javascript, and one of the form criteria is selecting your favorite carbohydrate. I want to display the selected option on the console, and i tried to create a function for it, but for some reasn when i log it, it says undefined.

My html:

<form>
        <label for="firstName">First Name</label><br>
        <input type="text" id="firstName" name="fname" required><br><br>
        <label for="lastName">Last Name</label><br>
        <input type="text" id="lastName" name="lname"><br><br>
        <label for="email">Email</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <label for="comment">Comment</label><br>
        <textarea name="comment" id="comment" rows="6" cols="50"></textarea><br>
        <p>My favorite Carbohydrate is:</p>
        <input type="radio" id="pasta" name="favCarb" value="pasta" required>
        <label for="pasta">Pasta</label><br>
        <input type="radio" id="rice" name="favCarb" value="rice" required>
        <label  for="rice">Rice</label><br>
        <input type="radio" id="potatoes" name="favCarb" value="potatoes" required>
        <label for="potatoes">Potatoes</label><br>
        <br><input onclick="submitData" type="submit" id="submitButton" value="Submit">

    </form>

My Javascript:

let firstName = document.getElementById("firstName");
let lastName = document.getElementById("lastName");
let email = document.getElementById("email");
let comment = document.getElementById("comment");
let pasta = document.getElementById("pasta");
let rice = document.getElementById("rice");
let potatoes = document.getElementById("potatoes");
let faveCarb = document.getElementsByName("favCarb").value;
let submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", submitData);

function submitData(){
       console.log(
       "First Name: " + firstName.value +
       " Last Name: " + lastName.value +
       " Email: " + email.value +
       " Comment: " + comment.value +
       " Favorite Carb: " + faveCarb.value
       )
       
};

Thanks for the help!

i tried using the .value method, but it logged "undefined" into the console

Itamar Avigdor
  • 1
  • `getElementsByName` doesn't return a single element, it returns a NodeList, which does not have a value in and of itself. – mykaf Dec 02 '22 at 20:36
  • [Duplicate](//google.com/search?q=site:stackoverflow.com+js+get+selected+radio+button+-jquery) of [Get the Value of Radiobutton Using JS](/q/41919262/4642212). It’s `document.querySelector("[name=favCarb]:checked").value`. – Sebastian Simon Dec 02 '22 at 20:37

0 Answers0