Drupal 6 AJAX in Drupal Node Forms

webadmin's picture
Coding

Recently, for the first time with Drupal 6, I needed to create a form where a variable number of fields could be added to it by simply clicking a 'Add more' button. I wanted to design a node form where users could create a custom compilation album of their favourite tracks. However the number of tracks would vary from album to album and so I wanted a way for users to be able to add more fields to the form without reloading the page. Now, yes I could have used CCK to build this custom content type, but I wanted to see how this could be done using Drupal's FAPI alone. I used Drupal's poll module as a guide on how to implement this.

The process is fairly simple if you're familiar with Drupal's Form API. However, a lot of code is needed but this is more for the other parts of the node form, rather than for the AJAX part itself. In fact, the code needed for the AJAX functionality is rather short, and is even shorter again in Drupal 7.

The first step in creating a new content type is to implement hook_node_info(). This informs Drupal of the custom content types defined by our module, which we're going to call 'album'.

<?php
function album_node_info() {
return array(
'album' => array(
'name' => t('Compilation album'),
'module' => 'album',
'description' => t('Create your very own custom compilation album.'),
'title_label' => t('Album name'),
'body_label' => t('Description'),
),
);
}
?>

Once we've done that we need to define the node form itself. At a minimum I decided it should have a title, a brief description along with the list of tracks. Unlike the poll module I didn't want tracks already added to be editable. Instead I wanted to display their details in a table, along with a remove link for each which would allow the user to delete individual tracks. New tracks could be added to the list using a set of form fields displayed beneath the table along with a 'Add another track' button.

So let's start by defining our form fields for the content type.