Results 1 to 2 of 2

Thread: why radio Radio Button is Selecting complete input field

  1. #1
    Join Date
    Apr 2021
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default why radio Radio Button is Selecting complete input field

    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
    Last edited by james438; 04-29-2021 at 02:24 AM. Reason: removed illegal sig

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,021
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    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
    ~ the original bald headed old fart ~

Similar Threads

  1. Selecting a radio button to determine a value
    By assassin204 in forum JavaScript
    Replies: 1
    Last Post: 05-08-2010, 12:17 PM
  2. Check a radio button when clicked on input field
    By PHP_Passion in forum JavaScript
    Replies: 1
    Last Post: 03-25-2010, 10:13 AM
  3. radio button with text field
    By syntaxerror in forum JavaScript
    Replies: 6
    Last Post: 05-12-2009, 01:21 AM
  4. Radio button and input text
    By syntaxerror in forum JavaScript
    Replies: 4
    Last Post: 05-07-2009, 08:19 AM
  5. Radio Button Select to complete input field
    By hamfast in forum Looking for such a script or service
    Replies: 9
    Last Post: 10-31-2007, 09:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •