I want to check if the Value enter in the input is in the datalist. If not i inform that the value is not in the list, I write something but the submit is done anyway, i miss something ? Edit: I edit to have a trial form. If i enter productD the submit can't not be done becuase is not in the list defined.

<tbody>
    <div >
        <form action="{% url 'createdfichetechnique' %}" method='post' onclick="return myCheckFunction(this)">
            <h1>Create the technical Sheet</h1>
            <br><br>
            <div >
                <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 >
                <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  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>

Example productD

CodePudding user response：

You cannot use include for DOM elements like you do.

Also you have duplicate IDs

Instead do this:

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 >
    <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 >
    <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  type="submit" value="Create" name="submit">
</form>

CodePudding user response：

There are two things going wrong in this:

1. document.getElementsById("productslist"); is incorrect. The function is getElementById(...)

2. document.getElementById("productslist"); will get you an HTML nodes, not the values. One of the ways to get the values is:

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

Now that you have the values in the values array, you can look it up to check if the value is already present.

CodePudding user response：

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
}

Check if is any products. If the script can't see any products disable the button to send. I hope I helped