javascript - How to show radio button value in an input

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.

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color


<input type="text" id="demo">

<script>
function myFunction() {
  var x = document.getElementById("myRadio").value;
  document.getElementById("demo").value = x;
}
</script>

</body>
</html>

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.

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.

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color


<input type="text" id="demo">

<script>
function myFunction() {
  var x = document.getElementById("myRadio").value;
  document.getElementById("demo").value = x;
}
</script>

</body>
</html>

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.

Share Improve this question edited Jan 4, 2019 at 12:59 AndrewL64 16.3k8 gold badges50 silver badges85 bronze badges asked Jan 4, 2019 at 12:41 rahul 4186 silver badges25 bronze badges

6 You can't have multiple id's with the same value in HTML. – Ivar Commented Jan 4, 2019 at 12:44
dynamic data is ing through php – rahul Commented Jan 4, 2019 at 12:57
2 sorry i will keep remember that – rahul Commented Jan 4, 2019 at 12:59
almost everyone solved my question if i do mark answer then other may get angry so i wll do later – rahul Commented Jan 4, 2019 at 13:10

Add a ment |

6 Answers 6

Sorted by: Reset to default 5

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);
});

<!-- HTML -->

<input type="radio" name="colors" value="red" class="myRadio">Red color
<input type="radio" name="colors" value="blue" class="myRadio">Blue color
<input type="radio" name="colors" value="green" class="myRadio">Green color


<input type="text" id="demo">

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;
}

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color


<input type="text" id="demo">

</body>
</html>

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;
}

<input type="radio" name="colors" value="red" class="myRadio">Red color
<input type="radio" name="colors" value="blue" class="myRadio">Blue color
<input type="radio" name="colors" value="green" class="myRadio">Green color

<input type="text" id="demo">

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;
}

<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color

<input type="text" id="demo">

<!DOCTYPE html>
    <html>
    <body>

    <input type="radio" name="colors" onclick="myFunction(this.value)" value="red" id="myRadio">Red color
    <input type="radio" name="colors" onclick="myFunction(this.value)" value="blue" id="myRadio">Blue color
    <input type="radio" name="colors" onclick="myFunction(this.value)" value="green" id="myRadio">Green color


    <input type="text" id="demo">

    <script>
    function myFunction(x) {
      document.getElementById("demo").value = x;
    }
    </script>

    </body>
    </html>

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

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

<label><input type="radio" name="colors" onclick="myFunction()" value="red">Red color</label>
<label><input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color</label>
<label><input type="radio" name="colors" onclick="myFunction()" value="green" >Green color</label>


<p>Selected Color <input type="text" id="demo"></p>

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();
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction()" value="red" >Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" >Green color


<input type="text" id="demo">

</body>
</html>

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;
}

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color


<input type="text" id="demo">

</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to show radio button value in an input - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)