Кнопка «Активировать», когда входное значение подтверждено списком данных - PullRequest
Новая
       8

Кнопка «Активировать», когда входное значение подтверждено списком данных

0 голосов
/ 02 июля 2018

Я перечислил ниже код действия. Не могли бы вы, ребята, помочь мне с этим? 

<form action="" method="post">
   <input type="text" class="form-control" list="colours" name="colours">
   <datalist id="colours">
      <option value="Red" data-id="1">
      <option value="Blue" data-id="2">
      <option value="Green" data-id="3">
      <option value="Black" data-id="4">
      <option value="White" data-id="5">
   </datalist>
   <button type="submit" class="btn btn-info" name="confirm">Zapisz</button>
</form>
  1. Как сделать так, чтобы кнопка «Сохранить» была неактивной до тех пор, пока входное значение не будет точно соответствовать параметрам списка данных?
  2. Как перенести содержимое кода из data-id?

Ура, спасибо за вашу помощь.

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете сначала отключить кнопку, добавив атрибут disabled. Обратите внимание, я добавил атрибут id для вашей кнопки и формы. Также есть тег <p> для использования в качестве результата / сообщения об ошибке, но вы можете настроить его. 

 <form action="" method="post">
   <input type="text" class="form-control" id="input" list="colours" name="colours">
   <datalist id="colours">
      <option value="Red" data-id="1">
      <option value="Blue" data-id="2">
      <option value="Green" data-id="3">
      <option value="Black" data-id="4">
      <option value="White" data-id="5">
   </datalist>
  <button id="myButton" disabled type="submit" class="btn btn-info" name="confirm">Zapisz</button>
</form>

<p id="result"></p>

Затем добавьте прослушиватель в javascript, чтобы прослушать любые изменения в форме ввода, и выполните проверку проверки, зациклив входное значение над параметрами. Если проверка проходит успешно, для атрибута disabled устанавливается значение false. Если нет, то сообщение будет брошено внизу.

Вот код JavaScript 

  window.onload = function () {
  document.getElementById("input").addEventListener('change', myFunction);


  function myFunction() {
    document.getElementById("myButton").disabled = true;
    let options = document.getElementById("colours").options;
    let selectionMade = false;
    let selectedValue = "";

    for (let i = 0; i < options.length; i++) {
        if(document.getElementById("input").value == options[i].value) {
        selectedValue = document.getElementById("input").value;
        selectionMade = true;
        document.getElementById("result").innerHTML = "Selected : " + selectedValue + ".";
        document.getElementById("myButton").disabled = false; 
      } 
    }

    if (selectionMade === false) {
              document.getElementById("result").innerHTML = "Please only select one of the available choices";
    }
   }
}

Вот ссылка на работающий jsBin .

Обновлено: для ответа на вопрос 2 о получении атрибута data-id выбранного параметра.

Чтобы получить атрибут data-id выбранной опции, в вашем javascript вы можете получить, используя следующий способ: 

let selectedDataId = options[i].getAttribute('data-id');

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

Вот ссылка на обновленный jsBin

...