JSFiddle - React, Tailwind, and code Playground

by Laberwurschd

HTML

<h1>Datalist</h1>
<form>
  <label for="feld">Browser:</label>
  <input list="liste" id="feld">
  <datalist id="liste">
    <option value="Edge (Microsoft)" id="test">
    <option value="Firefox (Mozilla)">
    <option value="Chrome (Google)">
    <option value="Opera (Opera)">
    <option value="Safari (Apple)">
  </datalist>
  <button>auswerten</button>
</form>

JavaScript

document.querySelectorAll("form").forEach(form => {
	const
    button = form.querySelector("button"),
    input = form.querySelector("input");

	function updateButtonDisabled () {
  	const result = input.value.match(/\(.*\)/);

		if (result && result.length) {
    	button.removeAttribute("disabled");
    } else {
    	button.setAttribute("disabled", "true");
    }
  }

	if (button && input) {
  	input.addEventListener("input", updateButtonDisabled);

    updateButtonDisabled();

    form.addEventListener("submit", event => {
      console.log("submitting value:",input.value);
    })
  }
});