AJAX in Drupal Forms? - drupal

Question

How would you go about constructing a step by step form that uses AJAX through Drupal to pull the next form step?
For example,
Step 1:
I like Baseball
I don't like Baseball.
When that person clicks on either Like or Don't Like, I want to use AJAX to recognize and pull the next part of the form, remove/hide the first section since its not needed, and present the next section.
Example:
Step 1:
I like Baseball
*click
(fade out)
Step 2:
My favorite team is __________
The player I like most is __________
What is the best way to do this through Drupal Form API? I know how to build the forms and modules, but I have never used AJAX yet. I know a few things exist out there that are supposed to help, but I wanted to know if anyone here has done it and how they approached it.

Answer 1

You may want to give a look at the AHAH helper module.

Answer 2

usually i am create full form with fieldsets, then control them manually by jquery.
i assume there lot of ready to go modules in drupal, some of these:
http://drupal.org/project/conditional_fields / http://drupal.org/project/multistep
also: http://www.google.ru/search?q=drupal+multistep+ajax+form

Answer 3

If you don't want to write any code, and don't need the entered data to be drupal nodes, I suggest using the webform module. It has a pretty simple UI for building forms, and allows you do do multipage forms with conditional fields. You can then export the results as CSV, email them, etc.

Answer 4

I have made to solutions for this problem in drupal 7. First one I solve it with Ajax as was requested(if someone want I can convert this to drupal6), however it should be better to solve this using attribute #states. So also made a solution in the bottom using states.
How to solve this using Ajax:
function ajax_in_drupal_form($form, &$form_state)
{
$baseball = array(
'like' => t('I like Baseball'),
'unlike' => t('I don\'t like Baseball')
);
$form['step'] = array(
'#prefix' => '<div id="baseball-wrapper">',
'#suffix' => '</div>',
);
if ($form_state['values']['baseball'] == 'like') {
$form['step']['team'] = array(
'#type' => 'textfield',
'#title' => t('My favorite team is'),
);
$form['step']['player'] = array(
'#type' => 'textfield',
'#title' => t('The player I like most is'),
);
}
else if ($form_state['values']['baseball'] == 'unlike') {
$form['step']['other'] = array(
'#type' => 'textfield',
'#title' => t('What do you like'),
);
}
else {
$form['step']['baseball'] = array(
'#type' => 'radios',
'#options' => $baseball,
'#title' => t('Select your option'),
'#ajax' => array(
'callback' => 'ajax_update_step_callback',
'wrapper' => 'baseball-wrapper',
),
);
}
return $form;
}
function ajax_update_step_callback($form, $form_state) {
return $form['step'];
}
Here is the solution using #states(The preferred way of solving it):
function states_in_drupal_form($form, &$form_state)
{
$baseball = array(
'like' => t('I like Baseball'),
'unlike' => t('I don\'t like Baseball')
);
// step 1
$form['step']['baseball'] = array(
'#type' => 'radios',
'#options' => $baseball,
'#title' => t('Select your option'),
'#states' => array(
'invisible' => array(':input[name="baseball"]' => array('checked' => TRUE),
),
)
);
// step 2 like baseball
$form['step']['team'] = array(
'#type' => 'textfield',
'#title' => t('My favorite team is'),
'#states' => array(
'visible' => array(':input[name="baseball"]' => array('checked' => TRUE)),
'visible' => array(':input[name="baseball"]' => array('value' => 'like')),
)
);
$form['step']['player'] = array(
'#type' => 'textfield',
'#title' => t('The player I like most is'),
'#states' => array(
'visible' => array(':input[name="baseball"]' => array('checked' => TRUE)),
'visible' => array(':input[name="baseball"]' => array('value' => 'like')),
)
);
// step 2 I don't like baseball
$form['step']['other'] = array(
'#type' => 'textfield',
'#title' => t('What do you like'),
'#states' => array(
'visible' => array(':input[name="baseball"]' => array('checked' => TRUE)),
'visible' => array(':input[name="baseball"]' => array('value' => 'unlike')),
)
);
return $form;
}