on button click show Radio button value is not working when radio value is changed

Question

I am using following on button click inline javascript to show Radio button value. But it is always showing English even if i change the value

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alert(document.getElementById('LanguageSelect').value);" />

my requirement is, need to show which radio is selected !

You have multiple elements that have the same `id` attribute. The DOM selector doesn't know which one to take. — Lix, Mar 23 '14 at 10:03
@Lix : so how to make it workable ? i want to have same name as it will be useful when i post submit the values — logan, Mar 23 '14 at 10:04
possible duplicate of [How to I get the value of a radio button with javascript](http://stackoverflow.com/questions/3778206/how-to-i-get-the-value-of-a-radio-button-with-javascript) — Lix, Mar 23 '14 at 10:08

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Please change the IDs of the element, and then depending on the value, show an element.

Otherwise, DOM cannot do that on itself.

Solution

Remove the id="LanguageSelect" from the HTML, because even if some other is checked, the current element will still have the id property. Here is the example of your code:

enter image description here

Here is the fiddle where I tested your code: http://jsfiddle.net/afzaal_ahmad_zeeshan/q25ba/

So, once you remove that, you'll get the problem fixed.

When you're selecting the value, it will look up for the first element, it will have the value of English, and will alert!

You can either use jQuery or check for the checkness of the elements:

jQuery

$('input[type=radio]:checked').val(); // check for the checked radio

This is easy and simple! I would recommend you this.

However, if you want to get the value of the radio buttons using JavaScript, try this:

JavaScript

/* this event to get triggered on click */
function checkCheckness () {
   var radioButton = document.getElementsByName("LanguageSelect");
   /* always remember, name should be similar, ID MUST NEVER be similar
    * using similar ID among different elements is illegal in HTML */
   if(radioButton[0].checked) {
      alert(radioButton[0].value);
   }
   /* add some else statements */
}

i want to have same name as it will be useful when i post submit the values — logan, Mar 23 '14 at 10:05
To have that, you need to use similar name not the similar ids..:) — Afzaal Ahmad Zeeshan, Mar 23 '14 at 10:16
You can see my answer! :) I have included everything that you need to know :) — Afzaal Ahmad Zeeshan, Mar 23 '14 at 10:16
Thanks for your answer... I did it myself.. please check my answer — logan, Mar 23 '14 at 10:17

Christos · Answer 2 · 2014-03-23T10:24:20.383

If you have only three options, the following solution would be reasonable:

<input type="radio" name="LanguageSelect"  id="LanguageSelect1" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect2" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect3" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />

and then in a script define the alertValue function.

alertValue = function(){
    var language1 = document.getElementById('LanguageSelect1');
    var language2 = document.getElementById('LanguageSelect2');
    var language3 = document.getElementById('LanguageSelect3');

    if(language1.checked)
        alert(language1.value);
    if(language2.checked)
        alert(language2.value);
    if(language3.checked)
        alert(language3.value);
}

Check this one please Fiddle. I have tested there this solution.

If you don't have problem on selecting the elements with another way, then another approach would be the following:

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />

and the corresponding js function:

alertValue = function(){
    var radios = document.getElementsByTagName("input");

    for (var i=0;i<radios.length;i++)
        if (radios[i].checked)
            alert(radios[i].value);

}

Check this one please FiddleV2. I have tested there this solution.

score 1 · Answer 3 · answered Mar 23 '14 at 10:26

                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
                    <input type="button" class="button5" value="Continue" onclick="clickable()" />

                    function clickable(){

                    var val=document.querySelector('input[name="LanguageSelect"]:checked').value;

                    alert(val);
                    }

score -1 · Answer 4 · answered Mar 23 '14 at 10:15

-1

i did it myself...

    onclick='if(document.getElementById(\'LanguageSelect1\').checked==true)
{alert(document.getElementById(\'LanguageSelect1\').value);} 
if(document.getElementById(\'LanguageSelect2\').checked==true)
{alert(document.getElementById(\'LanguageSelect2\').value);} 
if((document.getElementById(\'LanguageSelect3\').checked==true) 
{alert(document.getElementById(\'LanguageSelect3\').value);}'

answered Mar 23 '14 at 10:15

logan

7,946
36
114
185

Yes, only if you can include a `[]` parameter to check for each :) Then you'll be good as perfect...:) Something like: `if(document.getElementById('languageSelect1')[0].checked) {alert(this.value)}`...The usage of the `[0]` parameter is to check for each, you can use other integers too such as `[1]`, `[2]` to check next elements... – Afzaal Ahmad Zeeshan Mar 23 '14 at 10:19

on button click show Radio button value is not working when radio value is changed

4 Answers4

Solution

jQuery

JavaScript