Question

I checked for duplicates but didn’t find an exactly same problem so here we go. I have two radio-buttons and I need to return their values upon form submission. The problem is that when I click the submit button I always get the same radio-button value. Here is some code:

<div id="automatic">
        <p>Title1
            <input type="radio" id ="mode" name="mod" value="auto" >
        </p>           
    </div>

    <div id="selection">
        <p>Title2
            <input type="radio" id ="mode" name="mod" value="nonauto" >
        </p>           
    </div>

    <form id="search" action="test.jsp" method="GET" onsubmit="if (document.getElementById('search_text').value.length < 1) return false;">
        <input id="search_text" type="text" name="q">
        <input id="searchButton" type="submit" onclick="displayRadio()" value="Search" autocomplete="off" size="115">
    </form>

And here is the Javascript code:

function displayRadio() {
        alert(document.getElementById("mode").value)
}

Answer 1

Use different ids and use your function to lookup which of them is checked and return the value of that.

function displayRadio() {
    var modeauto = document.getElementById('modeauto');
    var modenoauto = document.getElementById('modenoauto');
    var value = modeauto.checked ? modeauto.value : modenoauto.value;
    alert(value);
}

I would recommend using jQuery for simplicity though.