使用 datalist 验证输入值时激活按钮

Question

我在下面列出了操作代码。你们能帮我解决吗？

<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 中传输代码的包含？

干杯，谢谢你的帮助。

Answer 1

您可以首先通过添加 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的链接