Gender checkbox is not functioning properly

Question

Gender checkbox data is not storing properly in local storage except 'MALE' checkbox, only 'MALE' checkbox is working 'FEMALE' and "OTHERS' are not working.

form page for taking input and saving it into local storage using javascript.

form.html

<!DOCTYPE html>
<html>
    <head>
        <title>FORM</title>
        <script>
            function getdata(){
            var name = document.getElementById("name").value;
            var mob = document.getElementById("mob").value;
            var email = document.getElementById("email").value;
            localStorage.setItem("txtValue", name);
            localStorage.setItem("txtValue_2" ,mob);
            localStorage.setItem("txtValue_3", email);
            
                var male = document.getElementById("male");
                var female = document.getElementById("femlae");
                var others = document.getElementById("others");
                if(male.checked==true){
                    localStorage.setItem("txtValue_1", "MALE");
                }else if(female.checked==true){
                    localStorage.setItem("txtValue_1", "FEMALE");
                }else if(others.checked==true){
                    localStorage.setItem("txtValue_1", "OTHERS");
                }else{
                    localStorage.setItem("txtValue_1", "ERROR");
                }
            }
            function remove(){
                window.localStorage.clear();
            }
        </script>
    </head>
    <body align="center" onload="remove()">
        <h1>FORM</h1><br>
        <form action="display.html" method="get">
            NAME : <input type="text" name="name" id="name"><br>
            GENDER : male <input type="radio" name="male" id="male">
            female <input type="radio" name="female" id="female">
            others <input type="radio" name="others" id="others"><br>
            Mobile No. : <input type="text" name="mob" id="mob"><br>
            Email : <input type="email" name="email" id="email"><br>
            <br><br>
            <button type="submit" onclick="getdata()" onclick="gender()">SUBMIT</button>
        </form>
    </body>
</html>

display page for accessing local storage and displaying it.

display.html

<!DOCTYPE html>
<html>
    <head>
        <title>display</title>
        <script>    
            function display(){
                document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
                document.getElementById("data1").innerHTML=localStorage.getItem("txtValue_1");
                document.getElementById("data2").innerHTML=localStorage.getItem("txtValue_2");
                document.getElementById("data3").innerHTML=localStorage.getItem("txtValue_3");
            }
        </script>
    </head>
    <body onload="display()" align="center">
        NAME : <span id="data"></span><br>
        GENDER : <span id="data1"></span><br>
        MOBILE NO. : <span id="data2"></span><br>
        EMAIL :  <span id="data3"></span>
    </body>
</html>

"Set equal name attributes to create a group;" Try to search SO before posting a question. This issue already has many feeds; e.g. https://stackoverflow.com/questions/28543752/multiple-radio-button-groups-in-one-form — chri3g91, Dec 27 '22 at 08:00

Vojin Purić · Answer 1 · 2022-12-27T08:04:55.210

Your radio inputs should all have the same name attribute and value should be the value of that input. For example

male <input type="radio" name="gender" value="MALE" id="male">
female <input type="radio" name="gender" value="FEMALE" id="female">
others <input type="radio" name="gender" value="OTHERS" id="others">

Now you can just simply get what is selected with

document.querySelector('input[name="gender"]:checked').value; //this will return MALE|FEMALE|OTHERS based on what is selected

You can also add required to any or all of your radio buttons html to ensure that user has to select something. Alternative you can pre-select one of the checkboxes with checked to make sure gender is always popilated

For more detail and celerity why should all have same name and different values

The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.

The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.

ref

score 0 · Accepted Answer · answered Dec 27 '22 at 08:03

0

If you are using radio type, they should all have the same name.

And you spelled "female" wrong.

answered Dec 27 '22 at 08:03

Rashid Shiralizade

42
3

Gender checkbox is not functioning properly

2 Answers2