Drupal 8: Ajax in Forms

Drupal Form Ajax Example

Why reload the whole page, when you can just update certain parts of the DOM? Ajax allows you to do just this, to dynamically update content. Just one of the many great uses of Ajax is Form Validation. In this example, we will see how to implement this.

We will be making a simple form which will contain a text field that will validate if the username entered exists, and a button that will replace the text field value with a random existing username.

Building The Form

First, we need to define our two form elements:

Next, to start using Ajax in Drupal, all you need to specify is the “callback”, or function to call, when the “event”, or trigger, is fired on that certain form element, in an array under the “#ajax” key:

In the “callback”, include the full namespaced class and function you want to call. The event can be any Javascript event without the “on”. A list of Javascript events can be found here.

Once you have added these two keys, you can add extra options such as “effect”, and “progress”. More options can be found on the Ajax API. Here are the finished elements:

Creating The Callbacks

After creating our form elements, it is time to create the callback functions which will return the response of what to update on the page.

These callbacks will return an instance of \Drupal\Core\Ajax\AjaxResponse. Each AjaxResponse instance will contain jQuery commands that will execute on the form. You can use the “addCommand()” method on AjaxResponse to add commands that implement \Drupal\Core\Ajax\CommandInterface.

Some commands such as CssCommand and ChangedCommand did not work. Thankfully, there is InvokeCommand which allows you to run any jQuery command. You can construct it with a jQuery selector, method, and arguments:

Here are the two callbacks for our form:

Finished Form

Here is our finished Ajax Example Form:

Drupal Form Ajax Example

 

This blog post was created for Google Code-In 2014 to learn about a Drupal Core System.

Full Module Code

Author: Akshay Kalose

A teenager, who is interested in Computer Science, Information Technology, Programming, Web Designing, Engineering and Physical Sciences.

One thought on “Drupal 8: Ajax in Forms”

  1. I am getting the following error

    call_user_func_array() expects parameter 1 to be a valid callback, non-static method [controller::usernameValidateCallback()] should not be called statically in Drupal\system\Controller\FormAjaxController->content()

Leave a Reply

Your email address will not be published. Required fields are marked *