How to show radio button value in an input

Question

I have radio buttons with the same name and same id, Which are dynamic data, I want to show these radio buttons values in input but when I am checking radio button only first radio button value is showing in input even if I check on second radio or third radio button.

I have three input type radio with the same name and same id but with different values, I am checking second and third radio button but it is showing only first radio button value in input.





Red color
Blue color
Green color

When I check on red color then its value should show on input type with id demo and if I check green or blue then it should show these value in input with id demo.

user_4114907 · Answer

You cant have more than one element with the same ID since IDs should be unique. You should replace them with a class and then target the class name instead.

Also, avoid writing your JavaScript inline and use event listeners instead like this:

/* JavaScript */

var radio = document.querySelectorAll(".myRadio");
var demo = document.getElementById("demo");
  
function checkBox(e){
 demo.value = e.target.value;
}

radio.forEach(check => {
 check.addEventListener("click", checkBox);
});



Red color
Blue color
Green color

user_1552587 · Answer

You can pass the event to the myFunction function and use that to determine which radio button was clicked, here is an example:

function myFunction(event) {
  document.getElementById("demo").value = event.target.value;
}





Red color
Blue color
Green color

user_9978535 · Answer


    
    

    Red color
    Blue color
    Green color

user_7461381 · Answer

The attribute id must be unique in a document. You can use class instead because class can be used to identify more than one element.

Please Note: It is not good practice to use inline event handler.

You can use Document.querySelectorAll() which returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. Then you can implement forEach() to loop through all the elements to attach the event.

You can simply use this keyword to refer the current radio button inside the function.

const allRadios = document.querySelectorAll('.myRadio');
const demo = document.getElementById('demo');
allRadios.forEach(r => r.addEventListener('change', myFunction));
function myFunction() {
  demo.value = this.value;
}

Red color
Blue color
Green color

If you do not want to modify the HTML, you can use attribute selector with Document.querySelector() by using the name and checked attribute of the element.

document.querySelector('[name=colors]:checked').value

const demo = document.getElementById('demo');
function myFunction() {
  var x = document.querySelector('[name=colors]:checked').value;
  demo.value = x;
}

Red color
Blue color
Green color

user_7189154 · Answer

Well first you should not have 3 element with the same id. Second you can have the checked radio button with jQuery. Here is your updated code:

function myFunction() {
 
  document.getElementById("demo").value =  $('input[name=colors]:checked').val();
}






Red color
Blue color
Green color

If you want to do it without jquery :

function myFunction(event) {
var checked = null; 
var elements = document.getElementsByTagName('input');
for(var i=0; elements[i]; ++i){
      if(elements[i].checked){
           checked = elements[i].value;
           break;
      }
}
  document.getElementById("demo").value = checked;
}





Red color
Blue color
Green color

user_10866052 · Answer

Never use an ID more than once.ID means unique.When we are using group of elements we should use class or any other common attribute. I ma using name of radiobutton group.

function myFunction() {
 var colorSelected = document.querySelector('input[name="colors"]:checked').value;
 document.getElementById("demo").value = colorSelected;
}

Red color
Blue color
Green color


Selected Color

How to show radio button value in an input

6 Answers