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>标签可以用作结果/错误消息，但是您可以自定义此标签。

 <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中添加一个侦听器以侦听对输入表单的任何更改，并通过在选项上循环输入值来运行验证检查。如果验证通过，它将禁用属性设置为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

的链接

通过数据列表验证输入值时激活按钮

1 个答案: