Блог

Главная - Вопросы по программированию - копирование текста в поле с помощью выбора по радио

копирование текста в поле с помощью выбора по радио

#javascript #html #function #dropdown #radio

#javascript #HTML #функция #выпадающий список

Вопрос:

Я хочу создать следующее, используя CSS, HTML и JavaScript

Курс1 // выпадающий выбор // …. Курс2 // выпадающий выбор // ….. ПОБЕДИТЕЛЬ (РАДИО проверено для Course1) ИЛИ (РАДИО выбрано для Course2) // автоматически заполняется из Course1 или Course2 в зависимости от проверенного радио//

но мой выпадающий список и выбор радио мешают друг другу.

Когда у меня есть имя из радио, то же самое «winnerselected», радио работает, но копирование из course1 или course2 не работает.

Может быть, кто-то создал подобный код где-то еще и знает, как его обойти?

Любая помощь будет признательна.

код следующим образом:

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

Комментарии:

1. мой выпадающий список и выбор радио мешают друг другу , не говорят нам ничего полезного. Пожалуйста, отправьте код, который вы пробовали, и конкретный вопрос о вашей проблеме.

2. До сих пор не ясно, в чем проблема. Слова «это не работает» нам не помогают. Что должно произойти — будьте ясны, чтобы мы могли вам помочь.

3. У вас также есть form вложенный внутри другого form , который недействителен.

4. @ScottMarcus это потрясающая помощь. Да, вы в значительной степени догадались об этом. Я хочу, чтобы какой бы переключатель ни был нажат, название этого курса заполнялось в поле «победитель».

5. Пожалуйста, посмотрите мой ответ ниже и не забудьте проголосовать и отметить как ответ «the».

Ответ №1:

Во-первых, ваш HTML недействителен, поскольку у вас есть второй form , без закрывающего тега, вложенный в первый. Кроме того, хотя законно не закрывать p элемент, вы действительно должны для ясности.

Затем удалите встроенные стили и встроенный JavaScript из вашего HTML. Это просто загромождает код, вызывает избыточность и усложняет чтение и обслуживание. Вместо этого разбейте свою работу на разделы 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>
Метки: