使用单选选择将文本复制到字段中

Question

我想使用 CSS、HTML 和 JavaScript

创建以下内容

Course1 //下拉选择// .... Course2 //下拉选择// ..... 优胜者（无线电检查课程 1）或（无线电点击课程 2） //根据选中的无线电从 Course1 或 Course2 自动填充//

但是我的下拉选择和单选选择互相妨碍。

当我从收音机中获得相同的“winnerselected”名称时，收音机可以正常工作，但从课程 1 或课程 2 中复制则不起作用。

也许有人在其他地方创建了这样的代码并且知道如何绕过它？

如有任何帮助，我们将不胜感激。

代码如下：

    <!--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>

Answer 1

首先，您的 HTML 无效，因为您有第二个 form，没有结束标记，嵌套在第一个中。此外，虽然不关闭 p 元素是合法的，但为了清楚起见，您确实应该这样做。

接下来，从您的 HTML 中删除内联样式和内联 JavaScript。它只会使代码混乱，导致冗余，并且更难阅读和维护。而是将您的工作分成 HTML、CSS 和 JavaScript 部分。

不清楚您到底想要什么，但我的猜测是无论单击哪个单选按钮都应该决定哪个文本框值成为赢家。基于此，请参阅下面的内嵌注释以了解代码的工作原理。

.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>

使用单选选择将文本复制到字段中

copy text into field using radio selection

html

javascript

function

radio

dropdown