AJAX in Drupal formats?
How are you going to create a step-by-step form that uses AJAX via Drupal to complete the next step of the form?
For instance,
Step 1:
I like Baseball
I don't like Baseball.
When this person clicks on Like or Dislike, I want to use AJAX to recognize and pull the next part of the form, remove / hide the first section as it is not needed, and submit 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 the Drupal API? I know how to create forms and modules, but I haven't used AJAX yet. I know there are several things that should help, but I wanted to know if anyone here did this and how they approached it.
a source to share
I usually create a complete form using fields, then manipulate them manually with jquery.
I assume there are many ready-made modules in drupal, some of them:
http://drupal.org/project/conditional_fields / http://drupal.org/project/multistep
also: http://www.google.ru/ search? q = drupal + multistep + ajax + form
a source to share
If you don't want to write any code and don't need the input data to be drupal nodes, I suggest using the webform module. It has a fairly simple interface for creating forms and allows you to create multi-page forms with conditional fields. Then you can export the results to CSV, email them, etc.
a source to share
I did to solve this problem in drupal 7. First I solve it with Ajax as requested (if anyone wants I can convert this to drupal6), however it is better to solve this using the #states attribute. The same solution was made at the bottom using states.
How to solve this with 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 a solution using #states (the preferred way to solve 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;
}
a source to share