Onchange Event in HTML: How to Use It [+Examples]

The HTML onchange event is one I’ve found myself using quite often, especially for forms when you need to validate user inputs or conditionally displaying items based on previous responses.

By harnessing the power of this simple HTML attribute, you can make for a smoother user experience. Whether it’s a faster newsletter signup or an easier checkout process, if people have an easier time on your website, they’ll be more likely to convert.

So, in this post, we’ll explore the onchange event, including how to write it, when to use it, and several examples that you can use as templates for your projects.

What is the onchange event?

onchange is an HTML event attribute that triggers when the value of an element changes, either by the user or by a script. onchange is used primarily on the <select>, <input>, and <textarea> elements. It is useful for conditionally changing displays based on user input, such as hiding or showing elements based on responses, form validation, or formatting responses.

HTML Onchange Syntax

The onchange event attribute is used on <select>, <input>, and <textarea>, as these elements accept user input. Here’s how to write it in one of these tags:

<element onchange=“functionName()”>

Next, let’s look at some examples of when you could use the onchange attribute to trigger a JavaScript function.

HTML Onchange Examples

The onchange attribute has many possible uses — here are few that you can test yourself if you’re developing a website.

Display the result of a value change.

In this example, the function displayChoice() is called whenever the value of the dropdown changes. The function changes the paragraph below to display the chosen value in the <select> dropdown.

See the Pen onchange - select example 1 by HubSpot (@hubspot) on CodePen.

Update an element based on another element’s selection.

onchange can also dynamically update an element based on a user’s response to another element.

Here, we have two <select> elements. When the user selects a car brand from the first dropdown, the second dropdown populates with models that the user can choose from. Try selecting different car brands from the first dropdown and see how the second updates dynamically.

See the Pen onchange - select example 2 by HubSpot (@hubspot) on CodePen.

Update an element’s styling with user input.

Here’s an example of how an <input> element can update an element's style. As you move the slider, it changes the image’s brightness accordingly.

See the Pen onchange - input example 1 by HubSpot (@hubspot) on CodePen.

Display fields based on user input.

In a form, you may want fields to display conditionally based on previous responses. Here’s an example of how to do this with onchange and a checkbox.

See the Pen onchange - input example 3 by HubSpot (@hubspot) on CodePen.

Validate user input.

In this example, we use JavaScript to validate a user’s input. It evaluates whether the input is a valid email address.

See the Pen onchange - input example 4 by HubSpot (@hubspot) on CodePen.

Filter results based on text input.

This example uses onchange to create something of a search function. As you type in the text box, the function filters out items in the list.

See the Pen onchange - input example 2 by HubSpot (@hubspot) on CodePen.

Evaluate a user’s text response.

Sometimes, you may want to evaluate a user’s long-form response and set a limit or minimum on the number of words or characters they use. Here’s how you can update the count on the page as the user types in a <textarea> element.

See the Pen onchange: textarea example by HubSpot (@hubspot) on CodePen.

Onchange Browser Support

The onchange event is supported on all modern browsers — you don’t have to worry about lack of compatibility when using this event or other HTML events.

However, it’s still worth testing the behavior of your onchange elements in different browsers, as well as across devices to ensure a smooth experience, as some browsers may trigger onchange at slightly different times, depending on the element that onchange is being used on.

For instance, in the examples above, you’ll notice that onchange forest for dropdowns when an item is selected. For text inputs, it will fire when the input box loses focus (i.e., is deselected by the user).

If you’re deploying an HTML module in Content Hub, you’ll also want to test that the module works properly.

Learn how the HTML onchange attribute works.

As we’ve seen, onchange is a powerful and versatile attribute that can improve your website’s responsiveness and make for a better experience for things like forms and other user inputs. It can trigger visual changes on the screen, or change a user’s input for validation purposes.

However you use this attribute, be sure to test it across browsers so that it works as intended, and practice with it to find more interesting ways to use it on your site.