Multistep ajax form, rebuild form and replace contents with the current step

Question

I have a multistep form. In the first step i have an AJAX submit callback that updates my &$step in $form_state and should return the next step of the form in the same page (replace contents of the form with the form elements in the second step) e.g.

  <?php

  funtion my_form_builder($form, &$form_state) {
     if (empty($form_state['step'])) {
      $form_state['step'] = 'step_1';
     }
     $step = & $form_state['step'];
     // build step 1
     if ($step == 'step_1') {
       $form['first_submit'] = array(
         '#type' => 'submit',
         '#ajax' => array(
           'callback' => 'form_first_submit',
          ),
         '#executes_submit_callback' => TRUE,
       );
     }
     // build step 2
     if ($step == 'step_2') {
       $form['elem_2'] = array(...)
       $form['elem_2_1'] = array(...)
     }
     return $form;
  }


  function form_first_submit($form, &$form_state) {
     $current_step = & $form_state['step'];
     // store values...
     // move on to the next step
     $current_step = 'step_2';

  $form = drupal_rebuild_form('my_form_builder', $form_state, $form);
  $commands[] = ajax_command_replace('#main-content', render($content));
  // return  ajax
  return array(
   '#type' => 'ajax',
   '#commands' => $commands,
  );
  }

So, naturally after the first submit, i should be able to rebuild my form and return to the #main-content the form elements defined for step 2. Why this doesn't work?I see the code passes on the right places and rebuilds and prepares the form for rendering.

I tried with drupal_build, drupal_retrieve_form and im getting nowhere.

If i drupal_get_form('another_form_id') it will work as expected.

Where is my error?

Answer 1

You dont' have to call drupal_get_form explicitly, instead mark form to rebuild.

In your ajax powerd element define two attributes: #submit, and #ajax.

#submit references the function that makes the action related to the submission (in your case changing the step value to 2 in form state). Also, set $form_state['rebuild'] to TRUE.

#ajax, where you set the ajax parameters and the PHP function that will return the result form the built form (in this case, the rebuilt one). When this fucntion is called form is build (or rebuilt) and you only have to return the form part you need.

Take into account that in the #ajax attribute you can set the HTMl element that will be replaced by the answer, so you don't need to use ajax commands.

<?php

  funtion my_form_builder($form, &$form_state) {
     if (empty($form_state['step'])) {
      $form_state['step'] = 'step_1';
     }
     $step = & $form_state['step'];
     // build step 1
     if ($step == 'step_1') {
       $form['first_submit'] = array(
         '#type' => 'submit',
         '#ajax' => array(
           'callback' => 'form_first_ajax_callback',
          ),
         '#executes_submit_callback' => TRUE,
         '#submit' => array('my_form_builder_callback'),
       );
     }
     // build step 2
     if ($step == 'step_2') {
       $form['elem_2'] = array(...)
       $form['elem_2_1'] = array(...)
     }
     return $form;
  }

  function my_form_builder_callback($form, &$form_state) {
     $current_step = & $form_state['step'];
     // store values...
     // move on to the next step
     $current_step = 'step_2';
     $form_state['rebuild'] = TRUE;
  }


  function form_first_ajax_callback($form, &$form_state) {

  $commands[] = ajax_command_replace('#main-content', render(form['element_to_return']));
  return array(
   '#type' => 'ajax',
   '#commands' => $commands,
  );
  }

Example uses the ajax commands aproach.

Check the Form API internal workflow illustration.