JavaScript Events

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

preventDefault stops the page reloading.

The Form Events

submit fires on the form when it is sent.

input fires on every change to a field's value.

change fires when the field is done, usually on leaving it.

Syntax

javascript

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

Without preventDefault the browser reloads the page.

Listen on the Form, Not the Button

A form can be submitted by pressing Enter as well as clicking.

Listening on the form catches both.

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

A click listener on the button would miss the Enter key.

input Fires on Every Keystroke

This is what you want for live feedback such as a character count.

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

It also fires when text is pasted in.

change Waits Until Finished

For a text box it fires when focus leaves.

For a select or checkbox it fires straight away.

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

The output is chose l.

focus and blur

These fire when a field is entered and left.

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

Validating on blur is friendlier than doing it on every keystroke.

Simple Validation on Submit

Check the values before deciding whether to carry on.

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

Always validate on the server too; the browser can be bypassed.

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>

Try It Yourself

Run the above example in the Try It Editor.

Try removing preventDefault:

Delete that line and watch the page reload when you submit.

Important Points

submit belongs to the form, not the button.
preventDefault stops the page reloading.
input fires on every change to the value.
change fires when the field is finished with.
focus and blur fire on entering and leaving a field.

Conclusion

Form events are how a page responds to what a visitor types and chooses.

Listening on the form for submit covers every way of sending it.

Browser validation is a convenience, never a security measure.

PreviousJavaScript Keyboard Events NextJavaScript Event Bubbling