why radio Radio Button is Selecting complete input field

**petermarsi** · 04-28-2021, 07:41 PM

Hello there

Hope you can help.

What is the easiest way of populating an input field with information selected via a radio button.

ie

Radio Button 1 = Red
Radio Button 2 = Blue
Radio Button 3 = Yellow

By selecting Radio Button 3 - the text 'Yellow', in this case, would complete an input field?

Thanks

**coothead** · 04-28-2021, 10:54 PM

Hi there petermarsi,

and a warm welcome to these forums.

Here is a possible solution...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
  }
 h1,h2 {
    line-height: 1em;
    color: #555;
    text-align: center;
    text-transform: capitalize;
  }
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30em;
    padding: 1em;
    margin: auto;
    border: 1px solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
  }
label{
    display: inline-block;
    width: 6em;
  }
input[type="text"] {
    width: 100%;
    max-width:16em;
    margin: 0.75em 0;
  }
</style>

</head>
<body>

 <h1>page description</h1>

 <form action="#">
  <h2>select colour</h2>
  <div>
   <input id="r0" name="r" type="radio" value="Red">
   <label for="r0">Red</label>
  </div>
  <div>
   <input id="r1" name="r" type="radio" value="Blue">
   <label for="r1">Blue</label>
  </div>
  <div>
   <input id="r2" name="r" type="radio" value="Yellow">
   <label for="r2">Yellow</label>
  </div>
  <input id="inp0" name="colour" type="text" readonly>
  <button>submit</button>
</form>

<!--
The internal JavaScript should be transferred to an external file
 <script src="your-filename.js"></script>
-->

<script>
(function(d) {
   'use strict';
   var labs = d.querySelectorAll( 'label' );
   var rads = d.querySelectorAll( 'input[name="r"]' );
   for ( var c = 0; c < rads.length; c ++ ) {
	     rads[c].addEventListener( 'click', changeValue(c), false );
   }
function changeValue(c) {
   rads[c].onclick = function() {
      d.querySelector( '#inp0' ).value = labs[c].textContent;
    };
  }
}(document));
</script>  

</body>
</html>

coothead