Module Development

Create a Dependent Dropdown with Ajax for Drupal 8, 9, 10, and 11

A common use of Ajax is to alter a form by adding, removing, or updating parts of the form in response to actions taken by the user. The resulting altered form is still eventually submitted with a traditional HTTP POST request. For example, one might update the options available in a city dropdown field after someone has chosen a value in the country dropdown, or add an additional textfield for collecting a person's name when the user clicks an "Add another person" button.

In this tutorial we'll:

  • Understand why certain types of modifications to a form require the use of Ajax
  • Use #ajax in conjunction with a <select> field to demonstrate how to update a form with Ajax
  • Learn about responding to user interaction with #ajax

By the end of this tutorial you should be able to use the #ajax attribute on any form element to respond to user actions and update the form displayed to the user with new content and options.