<html>
  <body>
    <form>
      <input type="text" id="name">
      <button type="submit" id="submit">Submit</button>
    </form>
  </body>
</html>
body {
  height: 100vh;
  align-content: center;
}

form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 300px;
  gap: 10px;
}

button {
  color: grey;
}

button.ready {
  background-color: blue;
  color: white;
}
const input = document.getElementById("name");
const button = document.getElementById("submit");

input.addEventListener("keydown", (evt) => {
  if (evt.target.value) {
    // expensive call, like doing a typeahead search
    renderSearch(evt.target.value);
    button.classList.add("ready");
  } else {
    button.classList.remove("ready");
  }
});

// This simulates doing something really slow.
function renderSearch() {
  const el = document.createElement("div");
  for (var i = 0; i <= 10000; i++) {
    el.innerHTML = el.innerHTML + i;
  }
  return el;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.