By matt.elkins on

Calling all AHAH experts...!!

I have written a module which creates a form. Some of the fields within the form can be duplicated by clicking an "add another" button. This feature is available to some individual fields within the form (e.g. a textbox), and also to several collections of fields (e.g. a fieldset containing two textboxes and a select list). I've implemented the "add another" functionality using AHAH, as shown by the code snippet taken from my form array below:

$form['form_step1']['tel_no_fieldset']['tel_no_wrapper'] = array("#type"=>"fieldset",
	"#prefix"=>"<div id=\"form_step1_tel_no\">", "#suffix"=>"</div>", "#tree"=>true);

	// Fields below will be duplicated...
	$form['form_step1']['tel_no_fieldset']['tel_no_wrapper'][0]['tel_no_text'] = array("#type"=>"textfield", "#title"=>t("Number"),
		"#required"=>true);
	$form['form_step1']['tel_no_fieldset']['tel_no_wrapper'][0]['tel_no_type_select'] = array("#type"=>"select", "#title"=>t("Type"),
		"#required"=>true, "#options"=>array(t("Select..."), "work"=>t("Work"), "home"=>t("Home"), "mobile"=>t("Mobile"), "other"=>t("Other")));
	$form['form_step1']['tel_no_fieldset']['tel_no_wrapper'][0]['tel_no_remove_button'] = array("#type"=>"button", "#value"=>t("Remove"),
		"#ahah"=>array("event"=>"click", "path"=>"form/js/1/tel_no/rem/0", "wrapper"=>"form_step1_tel_no", "method"=>"replace"));
	// Fields above will be duplicated...

$form['form_step1']['tel_no_fieldset']['tel_no_aa_button'] = array("#type"=>"button", "#value"=>t("Add another"),
	"#ahah"=>array("event"=>"click", "path"=>"form/js/1/tel_no/add/0", "wrapper"=>"form_step1_tel_no", "method"=>"replace"));

My AHAH callback function will respond to the user clicking the "add another" button by duplicating the form fields highlighted by the comments in the code above. Below is a simplified version of my callback function, which demonstrates how the duplication is achieved:

// Get total number of currently available fields.
$delta = count($_POST['form_step1']['tel_no_fieldset']['tel_no_wrapper']);

// Reset form state.
$form_state = array("submitted"=>false);
$form_build_id = $_POST['form_build_id'];

// Retrieve form from cache.
if (!$form = form_get_cache($form_build_id, $form_state)) exit;

// Create new form field(s) by duplicating existing form field(s).
$form_element = $form['form_step1']['tel_no_fieldset']['tel_no_wrapper'][($delta - 1)];

// Check for existence of remove button.
if (isset($form_element['tel_no_remove_button'])) {
	// Configure AHAH properties.
	$form_element['tel_no_remove_button']['#ahah']['path'] = str_replace("rem/" . ($delta - 1), "rem/" . $delta, $form_element['tel_no_remove_button']['#ahah']['path']);
	drupal_alter("form", $form_element, array(), "_form_addrem_fields");
}

// Add new form field(s) to form.
$form['form_step1']['tel_no_fieldset']['tel_no_wrapper'][$delta] = $form_element;

// Update cache.
form_set_cache($form_build_id, $form, $form_state);

// Rebuild form.
$form += array(
	"#post"=>$_POST,
	"#programmed"=>false
);

$form = form_builder($form['#id'], $form, $form_state);

// Render new form element(s).
$new_form = $form['form_step1']['tel_no_fieldset']['tel_no_wrapper'];
unset($new_form['#prefix'], $new_form['#suffix']);

$output = drupal_render($new_form);

// Activate AHAH properties for new form element(s).
$javascript = drupal_add_js(NULL, NULL, "header");

// Return.
drupal_json(array("status"=>true, "data"=>$output, "settings"=>call_user_func_array("array_merge_recursive", $javascript['setting'])));

The problem I'm experiencing is that the "remove" button for the duplicated form fields is not functioning correctly. Currently, clicking the "remove" button appears to be performing a standard form submission. The "remove" button for the original fields (i.e. the fields that are duplicated) is functioning correctly, however.

After doing some research in to this, I came across an article and a forum post containing relevant information relating to this problem - http://drupal.org/node/331941 and http://drupal.org/node/822890. Based on these, my understanding is that the following code (taken from my AHAH callback function) should solve the problem. Unfortunately, it doesn't appear to!

// A call to drupal_add_js...
$javascript = drupal_add_js(NULL, NULL, "header");

// ...and the "settings" element of the array below.
drupal_json(array("status"=>true, "data"=>$output, "settings"=>call_user_func_array("array_merge_recursive", $javascript['setting'])));

I'm not 100% sure what the code above is actually doing, so I'm hoping someone can provide some clarification, and also let me know if there any reason why the code wouldn't solve the problem in my case, or if there is another approach I should consider looking in to.

Many thanks in advance to anyone who can offer any advice!

⋅ Categories: Drupal 6.x