HTML - 输入数据列表 - 检查值在列表中

Question

我想检查输入中输入的值是否在数据列表中。 如果不是，我通知该值不在列表中，我写了一些东西，但无论如何提交完成了，我错过了什么？ 编辑：我编辑有一个试用表格。 如果我输入 productD，则无法完成提交，因为不在定义的列表中。

<tbody>
    <div class="fichetechniquediv">
        <form action="{% url 'createdfichetechnique' %}" method='post' onclick="return myCheckFunction(this)">
            <h1>Create the technical Sheet</h1>
            <br><br>
            <div class="divlot">
                <label for="lot">Enter your Lot:</label>
                <input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()">
            </div>
            <br><br>
            <div class="divproduct">
                <label for="productlist">Enter or Select Product:</label>
                <input type="text" name="Product" id="productlist" list="productslist" label="'Enter or Select your Product:">
                <datalist id="productslist">
                        <option value="productA">productA</option>
                        <option value="productB">productB</option>
                        <option value="productC">productC</option>
                </datalist>
            </div>
            <br><br>
            <input class="buttonsave" type="submit" value="Create" name="submit">
        </form>
    </div>
</tbody>

<script>
    function myCheckFunction(form) {
    var list = document.getElementsById("productslist");// get the values that are currently under the datalist tag in option tags
    var val = document.getElementsByName("Product");// get the user input
    if( list.include(val)){  // compare the options with the user input
      submit(form)}// if one is equal with the user input submit the form with the method submit();
    else{
        return false// else don't submit the form, the user will have to change his input
    }
    }
  </script>

示例产品D

Answer 1

你不能像你一样对 DOM 元素使用 include。

你也有重复的身份证

而是这样做：

 const list = document.querySelectorAll("productslist option") document.getElementById("myForm").addEventListener("submit", function(e) { const val = document.getElementById("productlistInput").value const found = [...list].find(opt => opt.value===val) if (;found) { alert("Please choose an existing value"). e;preventDefault(); } })

 <form id="myForm" action="..." method='post'> <h1>Create the technical Sheet</h1> <br><br> <div class="divlot"> <label for="lot">Enter your Lot:</label> <input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()"> </div> <br><br> <div class="divproduct"> <label for="productlist">Enter or Select Product:</label> <input type="text" name="Product" id="productlistInput" list="productslist" label="'Enter or Select your Product:"> <datalist id="productslist"> <option value="prod1">Product 1</option> <option value="prod2">Product 2</option> </datalist> </div> <br><br> <input class="buttonsave" type="submit" value="Create" name="submit"> </form>

Answer 2

这有两个问题：

1. document.getElementsById("productslist"); 是不正确的。 function 是getElementById(...)

2. document.getElementById("productslist"); 会给你一个 HTML 节点，而不是值。 获取值的方法之一是：

const values = [];
Array
  .from(document.getElementById("productslist").options)
  .forEach((option) => {
    values.push(option.value);
}

现在您在values数组中有了值，您可以查找它以检查该值是否已经存在。

Answer 3

const list = document.querySelector("#productslist")
const btn = document.querySelector(".buttonsave")
console.log(list.options.length)

if(list.options.length <= 0 ){
  btn.disabled = true
}else {
  btn.disabled = false
}

检查是否有任何产品。 如果脚本看不到任何产品，则禁用发送按钮。 我希望我有所帮助