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

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>

如何使“保存按钮”在输入值与数据列表选项完全匹配之前处于非活动状态？
如何从data-id中提取代码的内容？

干杯，谢谢你的帮助。

Answer 1

您可以先通过添加 disabled 属性将您的按钮设置为禁用。请注意，我在您的按钮和表单中添加了一个 id 属性。还有一个 <p> 标记用作 result/error 消息，但您可以对其进行自定义。

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

这是一个 link 到工作 jsBin。

已更新：回答问题 2 获取所选选项的 data-id 属性。

要获取所选选项的 data-id 属性，在您的 javascript 中，您可以通过以下方式获取：

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

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

这是一个 link 到更新的 jsBin

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

Activate button when input value is validated with datalist

javascript

validation

datalist