HTML onchange Attribute

Introduction

The onchange attribute is an inline event handler that runs JavaScript when the change event fires. That happens when the user commits a new value on a form control—for example picking a different option from a dropdown or finishing edits in a text field. It is widely used for updating UI, filtering lists, or reacting to form selections. On <select> and checkboxes, change fires immediately; on text inputs it usually fires when the field loses focus after the value changed. The change event bubbles, so you can listen on a parent form with addEventListener.

What You’ll Learn

Purpose of onchange Attribute

The primary purpose of onchange is to react when the user picks or enters a new committed value—without waiting for form submit. Common uses include updating a preview when a color is selected, loading related options when a category changes, syncing hidden fields, or enabling a submit button only after required choices are made. Because change only fires when the value actually changed, it avoids redundant work on focus moves that do not edit the field.

Do not confuse onchange with oninput. The input event fires on every keystroke; change waits until the value is committed. On text fields that usually means blur after editing. On <select>, change fires as soon as the user picks a new option.

📝 Syntax

Set onchange on a form control or assign element.onchange:

<script>

  function changeColor() {

    const color = document.getElementById("color").value;

    document.body.style.backgroundColor = color;

  }

</script>



<label for="color">Theme</label>

<select id="color" onchange="changeColor()">

  <option value="#f8fafc">Default</option>

  <option value="#eff6ff">Blue</option>

</select>

Syntax Rules

• Value is JavaScript code executed when the control’s value changes and is committed.
• Works on form controls: input, textarea, select, checkbox, and radio.
• On text inputs, change fires after edit + blur; on select, it fires immediately.
• JavaScript: element.onchange = function() { … }.
• Modern alternative: element.addEventListener("change", handler).
• The change event bubbles — you can delegate on <form>.

💎 Values

The onchange attribute accepts a string of JavaScript code:

• onchange="changeColor()" — Call a named function.
• onchange="this.form.submit()" — Inline statement (use carefully).
• JavaScript: field.onchange = () => { … } assigns the handler.

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

city.addEventListener("change", () => {

  console.log("Committed value:", city.value);

});

// On select — fires immediately when option changes

document.getElementById("country").addEventListener("change", (e) => {

  loadRegions(e.target.value);

});

Applicable Elements

onchange vs onblur vs oninput

Examples Gallery

Inline onchange on a select dropdown, addEventListener on a text input, and comparing change with oninput.

<label for="color">Theme color</label>

<select id="color" onchange="changeColor()">

  <option value="red">Red</option>

  <option value="green">Green</option>

</select>



<script>

  function changeColor() {

    const value = document.getElementById("color").value;

    document.body.style.backgroundColor = value;

  }

</script>

<script>

  document.getElementById("city").addEventListener("change", function () {

    console.log("Committed value:", this.value);

  });



  // Or property form:

  document.getElementById("city").onchange = function () { /* … */ };

</script>

field.addEventListener("input", () => {

  counter.textContent = field.value.length + " characters";

});



field.addEventListener("change", () => {

  saveDraft(field.value);

});

♿ Accessibility

• Announce updates — When change triggers visible UI updates, consider aria-live="polite" on a status region so screen readers are notified.
• Do not rely on color alone — Pair visual feedback with text so all users understand what changed.
• Avoid alert() on change — Inline status text near the control is more accessible than modal alerts.
• Keyboard users — Change fires when keyboard users select options or blur edited fields; test with Tab and arrow keys.
• Labels — Every control with onchange should have an associated <label> or aria-label.

💡 Best Practices