Question 197980 in Html Question posted in
Some basic documentation can be found here.

Html – Radio button not taking the value as expected

Below are my HTML and javascript codes:

HTML

<body>
       
        <div>
            <form id="radioform">
                <fieldset>
                    <div class="mainbox">
                        <label for="gender"><strong>Gender</strong></label><br> 
                    </div>

                    <div id="optionbox">
                        <input type="radio" id="female" name="gender" value="female" /> Female
                        <input type="radio" id="male" name="gender" value="male" /> Male
                    </div> 
                    <input type="submit" value="Submit" class="submit-btn" />
                </fieldset>
            </form>
        </div>
    </body>
    <script src="script.js"></script>

Javascript

var genderval = "null";

const form = document.getElementById("radioform");
form.addEventListener("submit", (e) => {
    e.preventDeafult();
    genderval = document.querySelector(
    'input[name="gender"]:checked').value;
});

console.log(genderval); //test

if(genderval === "female") {
    console.log("Female");

} else if(genderval === "male") {
    console.log("Male");
}

It only prints out "null" no matter which radio button I select.
It seems like checked is not working properly in the querySelector but I do not understand why.

(var genderval = "null"; is just for the testing. It returns me an uncaught reference error when I delete the line.)

Tags:

2

Answers


  1. 0

    Use let genderval; to define your variable. It’s e.preventDefault();. Also, put your if...else statement inside the addEventListener() method.

    let genderval;

const form = document.getElementById("radioform");
form.addEventListener("submit", (e) => {
    e.preventDefault();
    genderval = document.querySelector('input[name="gender"]:checked').value;
    if (genderval === "female") {
        console.log("Female");
    } else if (genderval === "male") {
        console.log("Male");
    }
});

console.log(genderval); //test
    <div>
    <form id="radioform">
        <fieldset>
            <div class="mainbox">
                <label for="gender"><strong>Gender</strong></label><br>
            </div>
            <div id="optionbox">
              <input type="radio" id="female" name="gender" value="female" /> Female 
              <input type="radio" id="male" name="gender" value="male" /> Male
          </div>
            <input type="submit" value="Submit" class="submit-btn" />
        </fieldset>
    </form>
</div>

    The variable is undefined at first, but once you check any of both radio buttons and click on "submit", it’ll print the corresponding value.

    Login or Signup to reply.
  2. 0
    1. There is a slight spelling mistake, it would be failing at e.preventDeafult(); as correct method is e.preventDefault();.
    2. Since console logs are used outside of addEventListener block, they will get triggered when script.js file is loaded and hence when submit event is triggered, it will always show null. To fix this issue, console logs can be shifted inside addEventListener like below
    
    var genderval = "null";
    const form = document.getElementById("radioform");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        genderval = document.querySelector('input[name="gender"]:checked').value;
        console.log(genderval);
        if (genderval === "female") {
            console.log("Female");
        } else if (genderval === "male") {
            console.log("Male");
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search