Page content

Advanced AJAX enabled multi-step forms: creating and altering Drupal entities in custom forms (aka: Wizard forms)


Sometimes we need to create custom Drupal forms to create or update Drupal Entities, in a different manner than the default forms that we are provided with. In this tutorial, we will look at creating a form 'wizard', that allows a user to create or edit two nodes in a single form.

Example overview

Throughout the world, many companies have multiple branches of their company. The form we will create in this tutorial will create a company, and then a branch that is assigned to that company. This will be done using a multistep form with the following steps:

Calling a function after an #AJAX event (Drupal 7)

When working with Drupal 7's Form API, I often need to call a JavaScript function after the #AJAX event has fired. This was quite difficult in Drupal 6, but Drupal 7 offers a nice mechanism to do so. In this tutorial, we will be going over a basic example on how to create a JavaScript function that is fired after an #AJAX function has completed. To do so, we will be looking at Drupal's Ajax Commands, and how we can use the system provided callbacks, as well as define our own custom callbacks, to enhance our Drupal forms.

Drupal 7: Ajax driven multi-step forms with a non-javascript fallback

As any Drupal developer has learned soon enough, Drupal's Form API is extremely powerful, but with that power come complexity. Building a complex Drupal form to look and behave the way you want is almost an art form in and of itself. This tutorial will discuss how to build a multi-step, #ajax driven Drupal 7 form with a non-JavaScript fallback.

Calling a function after an #AHAH event (Drupal 6)

In Drupal 6, I've at times in the past needed to fire off a function after an AHAH callback. The problem here is that AHAH is a pre-built set of functions by Drupal, and as far as I can tell, the only function it executes after completion is Drupal.behaviors. However, I personally don't see anything in the Drupal object to differentiate whether Drupal.behaviors is being fired on initial page load, or after an AHAH event. jQuery to the rescue! jQuery offers a nice little .ajaxComplete() function that is fired off after every Ajax event. We can use this function to fire off whatever other function we want when AHAH is complete.