JavaScript Form Events

Written by Swapnil RajaPublished 24 Aug 2026

Form events fire when a field changes or a form is submitted.

submit belongs to the form, not to the button.

input fires on every keystroke, while change waits until the field is finished.

Example

javascript

document.body.innerHTML = '<form id="form"><input id="name" value="Ada"></form>';

document.getElementById("form").addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("submitted " + document.getElementById("name").value);
});

document.getElementById("form").dispatchEvent(
  new Event("submit", { cancelable: true })
);

PreviousJavaScript Keyboard Events NextJavaScript Event Bubbling

Example

javascript

document.body.innerHTML =
  '<form id="form"><button type="submit">Send</button></form>';

document.getElementById("form").addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("handled once, whatever the visitor did");
});

document.getElementById("form").dispatchEvent(
  new Event("submit", { cancelable: true })
);

Example

javascript

document.body.innerHTML = '<input id="field">';

const field = document.getElementById("field");

field.addEventListener("input", function () {
  console.log(field.value.length + " characters");
});

field.value = "abc";
field.dispatchEvent(new Event("input"));

Example

javascript

document.body.innerHTML =
  '<select id="size"><option value="s">Small</option>' +
  '<option value="l">Large</option></select>';

const size = document.getElementById("size");

size.addEventListener("change", function () {
  console.log("chose " + size.value);
});

size.value = "l";
size.dispatchEvent(new Event("change"));

Example

javascript

document.body.innerHTML = '<input id="field">';

const field = document.getElementById("field");

field.addEventListener("focus", function () { console.log("entered"); });
field.addEventListener("blur", function () { console.log("left"); });

field.dispatchEvent(new Event("focus"));
field.dispatchEvent(new Event("blur"));

Example

javascript

document.body.innerHTML =
  '<form id="form"><input id="name" value=""></form>';

document.getElementById("form").addEventListener("submit", function (event) {
  event.preventDefault();
  const value = document.getElementById("name").value.trim();
  console.log(value === "" ? "name is required" : "sending " + value);
});

document.getElementById("form").dispatchEvent(
  new Event("submit", { cancelable: true })
);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Form Events</title>
</head>
<body>

  <h1>Form Events</h1>

  <form id="form">
    <input id="name" placeholder="Your name">
    <button type="submit">Send</button>
  </form>

  <p id="out"></p>

  <script>
    const form = document.getElementById("form");
    const name = document.getElementById("name");
    const out = document.getElementById("out");

    name.addEventListener("input", function () {
      out.textContent = name.value.length + " characters";
    });

    form.addEventListener("submit", function (event) {
      event.preventDefault();

      if (name.value.trim() === "") {
        out.textContent = "Please enter a name";
      } else {
        out.textContent = "Thanks, " + name.value;
      }
    });
  </script>

</body>
</html>

JavaScript Form Events

Example

The Form Events

Syntax

Listen on the Form, Not the Button

Example

input Fires on Every Keystroke

Example

change Waits Until Finished

Example

focus and blur

Example

Simple Validation on Submit

Example

Complete Example

Try It Yourself

Important Points

Conclusion