performing a search on enter?

I have this form:

<form>
  <label for="locationsearch">Location:</label>
  <input type="search" id="locationsearch" name="locationsearch" />
</form>

I want to add an eventListener when I hit enter on the input(i.e. #locationsearch).
I tried doing this:

const locationSearch = document.getElementById("locationsearch");
    locationSearch.addEventListener("search", () => {
      console.log("search entered");
    });

and this:

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};

Both are not console-logging.

What is the correct/better way to perform this action?

>Solution :

The onsubmit event would happen on the form itself, not the input. So you could use an id on the form instead to target it directly.

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};
<form id="locationsearch">
  <label for="locationsearch">Location:</label>
  <input type="search" name="locationsearch" />
</form>

Leave a Reply