Warm tip: This article is reproduced from serverfault.com, please click

copy text into field using radio selection

发布于 2020-11-29 02:10:32

I am wanting to create the following using CSS, HTML and JavaScript

Course1 //dropdown selection// .... Course2 //dropdown selection// ..... WINNER (RADIO checked for Course1) OR (RADIO clicked for Course2) //automatically populated from either Course1 or Course2 depending on Radio checked//

but my dropdown selection and radio selection hamper each other.

When I have the name from the radio the same "winnerselected" the radio works, but the copying from the course1 or course2 doesn't work.

Maybe someone has created code like this somewhere else and knows how to get around it?

Any assistance will be appreciate.

code as follows:

    <!--Make sure the form has the autocomplete function switched off:-->
    <form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
    Course 1
    <input id="myInput" type="text" name="golfcoursename1" placeholder="Golf 
    Course">
    <form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
    Course 2
    <input id="myInput1" type="text" name="golfcoursename2" placeholder="Golf 
    Course">
    </div>
    <p>
    WINNER
    <p>
    <input type="radio" id="Course1" name="winnerselected" value="Course1" 
    onclick="FillWinner(this.form)">
    <label for="Course1">Course 1</label>  
    <input type="radio" id="Course2" name="winnerselected" value="Course2" 
    onclick="FillWinner2(this.form)">
    <label for="Course2">Course 2</label><br>
    <input type="text" id="winner" name="Winner" placeholder="Winner">
        <p>
    </p>  
    <input type="submit">
    </form>

    <script>
    function FillWinner(f) {
    if(f.winnerselected.checked == true) {
    f.winner.value = f.golfcoursename1.value;
    if(f.winnerselected.checked == true) 
    f.winner.value = f.golfcoursename2.value;
    }}
    </script>
Questioner
Blakey
Viewed
0
Scott Marcus 2020-11-29 23:56:06

First, your HTML is not valid as you have a second form, with no closing tag, nested in the first one. Also, while is is legal to not close a p element, you really should for clarity sake.

Next, remove inline styles and inline JavaScript from your HTML. It just clutters up the code, causes redundancy, and is harder to read and maintain. Instead break your work into HTML, CSS, and JavaScript sections.

It's not clear what you exactly want, but my guess is that whichever radio button is clicked should dictate which textbox value becomes the winner. Based on that, see the comments inline below for a description of how the code works.

.autocomplete { width:300px; }
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
  <div class="courses">
    <div class="autocomplete">
      Course 1 <input id="myInput" name="golfcoursename1" placeholder="Golf Course">
    </div>
    <div class="autocomplete">
      Course 2 <input id="myInput1" name="golfcoursename2" placeholder="Golf Course">
    </div>
  </div>
  <p>WINNER</p>
  <p id="radioContainer">
    <input type="radio" id="Course1" name="winnerselected" value="Course1">
    <label for="Course1">Course 1</label>  
    <input type="radio" id="Course2" name="winnerselected" value="Course2">
    <label for="Course2">Course 2</label><br>
    <input type="text" id="winner" name="Winner" placeholder="Winner">
  </p>  
  <input type="submit">
</form>

<script>
  // Don't use inline HTML event attributes like onclick.
  // Separate your JavaScript from your HTML
  
  // Get references to the element(s) you'll need to work with
  
  // Get all the elements that have a name attribute that starts with "golfcoursename"
  const courseNames = document.querySelectorAll("[name^='golfcoursename']");
  
  // Get all the elements that have a name attribute that is exactly "winnerselected"
  const radioButtons = document.querySelectorAll("[name='winnerselected']");
  const winner = document.getElementById("winner");
  
  // Here's how to set up events in JS
  const radCont = document.getElementById("radioContainer").addEventListener("click", fillWinner);
  
  function fillWinner(event) {
    // Look at the radiobuttons collection and get the index of the selected radio button from it.
    const indexOfTextbox = Array.from(radioButtons).indexOf(event.target);
   
    // Set the value of the winner textbox to textbox with the same index as the clicked radio button
    winner.value = courseNames[indexOfTextbox].value;
  }
</script>