How to reset values of elements in multi-step form

Question

I'm building quite a complicated and large custom form. Below I've made a simple example form to demonstrate my case:

function mymodule_form($form, &$form_state) {
  $form['step1']['element1'] = array(
    '#type' => 'select',
    '#title' => 'Element 1',
    '#options' => array('All' => '- Any -', 'option1' => 'Option 1', 'option2' => 'Option 2'),
  );

  $form['step1']['element2'] = array(
    '#type' => 'select',
    '#title' => 'Element 2',
    '#options' => array('All' => '- Any -', 'option1' => 'Option 1', 'option2' => 'Option 2'),
  );

  $form['step1']['addfilter'] = array(
    '#type' => 'submit',
    '#value' => 'Add filter',
    '#name' => 'addfilter',
    '#ajax' => array(
      'callback' => 'mymodule_form_callback',
      'wrapper' => 'results-div',
    ),
  );

  $form['step2'] = array(
    '#type' => 'fieldset',
    '#title' => t('Results'),
    '#prefix' => '<div id="results-div">',
    '#suffix' => '</div>',
  );

  // Ajax values process
  if(isset($form_state['values'])) {
    foreach($form_state['values'] as $key => $value) {
      if($value != 'All') {
        $form['step2']['step2-'.$key] = array(
          '#type' => 'button',
          '#value' => 'remove ' . $key,
          '#name' => 'step2-'.$key,
          '#ajax' => array(
            'callback' => 'mymodule_form_remove_callback',
            'wrapper' => 'results-div',
          ),
        );
      }
    }
  }
}

function mymodule_form_callback($form, &$form_state) {
  return $form['step2'];
}

function mymodule_form_remove_callback($form, &$form_state) {
  // What to do here???
}

Basically what should happen is:

1. Select a value from the step1 elements
2. Click Add Filter button
3. The form function runs again, and this time it creates ajax'd "remove" buttons under step2.
4. When you press the remove button, the corresponding form element in step1 should get its value reset to 'All' and the corresponding step2 button needs to get removed.

I'm getting stuck at step 4, I'm not sure how to reset a submitted multi-step form's values.

Answer 1

As I understand it, you don't need the ajax callback for the remove button. You should be able to do that with just using jQuery, and a rel attribute to hold the ID. Consider the following:

Add a class for the jQuery script and a rel attribute that holds the Step 1 element count id to the remove button.

$form['step2']['step2-'.$key] = array(
  '#type' => 'button',
  '#value' => 'remove ' . $key,
  '#name' => 'step2-'.$key,
  '#attributes' => array('rel' => 1, 'class' => 'remove-button'),
);

jQuery script to remove the "remove" button and reset the the Step 1 form element.

$('.remove-button').click(function(e) {
  var id = $(this).attr('rel');
  $('#element'+ id +').val('All');
  $(this).closest('.button-wrapper-class').remove();
  e.preventDefault();
});

This is (most likely) non-working example code, but I think you'll understand my point.

Answer 2

I was able to make this happen. I'm not sure if the way I'd done it is way too hacky/improper use of FAPI. But it works. What I did was:

1. On the remove button, I added a rel attribute with the name of the item to reset, as suggested by @enzipher
2. On the same form function, I checked for $form_state['triggering_element'] and see if its value is remove and has rel attribute. If so, then I do form_set_value and reset the item's value in $form_state. Because form_set_value only changes form_state and not the $form, I also immediately set #value of the $form elements to the reset value.
3. On the callback function I built an array of ajax commands to both replace the target form element, as well as replace #results-div so that the button gets removed.