Activate button when input value is validated with datalist

Question

I’ve listed below action code. Could you guys help me out with it?

<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>

How to make the „Save button” be inactive until the input value exactly matches the datalist options?
How to transfer the contain of the code from data-id?

Cheers, thank you for your help.

Abba · Accepted Answer · 2018-07-03T08:43:06.173

You can first set your button to be disabled by adding the disabled attribute. Note, I added an id attribute to your button and the form. There's also a <p> tag to use as a result/error message but you can customize this.

 <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>

Then add a listener in javascript to listen to any changes to the input form, and run a validation check by looping the input value over the options. If the validation passes, it sets the disabled attribute to false. If not, it will throw a message in the bottom.

Here is the javascript code

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

Here is a link to a working jsBin.

Updated: to answer question 2 of getting the data-id attribute of the option selected.

To get the data-id attribute of the option selected, in your javascript you can get using this way:

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

After you get this value, you can update a hidden input form inside your form so that the value is submitted along.

Here is a link to an updated jsBin

I do want to add that if you want your users to only select one of your data-list options, you can consider implementing select tag instead which is a better choice. See this answer for [reference](https://stackoverflow.com/a/7002118/6828976). — Abba, Jul 03 '18 at 07:12
Thank you so much! This is exactly what I need. Can you answer also to second question? When user is sending form, server got `[colours] = Blue`. Is there any possibility to get `[colours] = 2`? — Łukasz Mikowski, Jul 03 '18 at 07:29
Yes, I know that there is `select` tag, but when You use it, You dont have live hint, which is very usefull when there is hundreds options. — Łukasz Mikowski, Jul 03 '18 at 08:35

Activate button when input value is validated with datalist

1 Answers1