How to get value of radio buttons that are separated by divs?

Question

I have 3 radio buttons, while they all share the same name, for visual purposes, they're encapsulated in their own Divs. The issue is, when I try to retrieve the value of the radio buttons (aka the selected button), it returns an error ReferenceError: editList is not defined at HTMLButtonElement.document.getElementById.onclick (sqlTemplate.html:56)

Here is the code:

   var a;
        
    document.getElementById("submitButton").onclick = function(){
        a = editList.value;
        console.log(a);
    }

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    border: 1px grey solid;
    border-radius: 2px;
    padding: 10px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    width: 150px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
}

#radioButtonCol1 > *{
    display: block;
}

.radioInputStyle{
    margin: 0 auto;
}

.radioLabelStyle{
    
}

#radioSubmitButtonDiv{
    width: 100%;
    margin-bottom: 30px;
}

#submitButton{
    width: 174px;
    display: block;
    border-radius: 2px;
    border: 1px solid grey;
    margin: 0 auto;
}

#submitButton:active{
    background-color: #D0D0D0;
}

<form action="/action_page.php" style="display: inline;">
           
           <div id="radioGroupContainer">
           
            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Linear</label>
                <input id="radButLinear" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>   

            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Tactile</label>
                <input id="radButTactile" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>

            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Tactile and Clicky</label>
                <input id="radButTandC" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>
            
           </div>
        </form>
        
        <div id="radioSubmitButtonDiv">
            
            <button id="submitButton">Submit</button>
            
        </div>

How can I retrieve the value while keeping them separated?

Answer 1

There are a couple of issues.

First of all you are using dual ids on the radio buttons, and the second id is common. So scrap the second id declaration for all.

Then the for attribute of the labels should point to the correct remaining id of each input.

Then you are using the same value for all three radio buttons which will not help you in understanding what the user selected.

Finally in your script there you need to query for the checked radio button document.querySelector('.radioInputStyle:checked') before accessing its value

So

var a;
        
document.getElementById("submitButton").onclick = function(){
    a = document.querySelector('.radioInputStyle:checked').value;
    console.log(a);
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    border: 1px grey solid;
    border-radius: 2px;
    padding: 10px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    width: 150px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
}

#radioButtonCol1 > *{
    display: block;
}

.radioInputStyle{
    margin: 0 auto;
}

.radioLabelStyle{
    
}

#radioSubmitButtonDiv{
    width: 100%;
    margin-bottom: 30px;
}

#submitButton{
    width: 174px;
    display: block;
    border-radius: 2px;
    border: 1px solid grey;
    margin: 0 auto;
}

#submitButton:active{
    background-color: #D0D0D0;
}

<form action="/action_page.php" style="display: inline;">
           
           <div id="radioGroupContainer">
           
            <div id="radioButtonCol1">
                <label for="radButLinear" class="radioLabelStyle">Linear</label>
                <input id="radButLinear" type="radio" name="editList" value="linear" class="radioInputStyle"/>
            </div>   

            <div id="radioButtonCol1">
                <label for="radButTactile" class="radioLabelStyle">Tactile</label>
                <input id="radButTactile" type="radio" name="editList" value="tactile" class="radioInputStyle"/>
            </div>

            <div id="radioButtonCol1">
                <label for="radButTandC" class="radioLabelStyle">Tactile and Clicky</label>
                <input id="radButTandC" type="radio" name="editList" value="both" class="radioInputStyle"/>
            </div>
            
           </div>
        </form>
        
        <div id="radioSubmitButtonDiv">
            
            <button id="submitButton">Submit</button>
            
        </div>