Javascript 使用数据列表验证输入值时激活按钮

我在下面列出了行动代码。你们能帮我一下吗

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

扎皮兹

如何使“保存按钮”处于非活动状态，直到输入值与数据列表选项完全匹配

如何从数据id传输代码的内容

---

干杯，谢谢您的帮助。

您可以先通过添加“已禁用”属性将按钮设置为禁用。注意，我在按钮和表单中添加了一个id属性。还有一个

标记用作结果/错误消息，但您可以自定义它

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

获得此值后，可以更新表单中的隐藏输入表单，以便将值一起提交

---

这里是一个更新的

的链接。我想补充的是，如果您希望用户只选择一个数据列表选项，则可以考虑实现SELECT TAG，而不是更好的选择。请看下面的答案。非常感谢！这正是我需要的。你能回答第二个问题吗？当用户发送表单时，服务器得到

[colors]=Blue

。有没有可能得到

[colors]=2

？是的，我知道有

select

标签，但当你使用它时，你没有实时提示，这在有数百个选项时非常有用。更新我的帖子来回答你的第二个问题。

  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";
    }
   }
}

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