Changing Submit Input Elements Into Buttons In Drupal 7

I spent what seemed like an eternity today trying to figure out something in a form I was creating on a Drupal site. I was building a multi step form with previous and next buttons, both of which were submit elements like this.

$form['next'] = array(
  '#type' => 'submit',
  '#name' => 'next',
  '#submit' => array(
    'mymodule_next_submit'
  ),
  '#value' => 'Next Step',
);

What I needed to do was override these and make them button elements instead of input elements. This involved creating a theme function in my template that looked like this. You could also do this in your module by adding theme overrides using hook_theme_registry_alter().

/**
 * Override of theme_button().
 *
 * Render the button element as a button and the submit element as an input element.
 */
function mytheme_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  
  element_set_attributes($element, array('id', 'name', 'value'));  
  
  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }

  if (isset($element['#buttontype']) && $element['#buttontype'] == 'button') {
    $value = $element['#value'];
    unset($element['#attributes']['value']);
    return '<button' . drupal_attributes($element['#attributes']) . '>' . $value . '</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

I then changed the previous and next button definitions to look like the following. The elements were still submit form elements, but they were rendered as buttons by using a #buttontype custom property.

$form['prev'] = array(
  '#type' => 'submit',
  '#name' => 'prev',
  '#validate' => array(
    'mymodule_previous_validate'
  ),
  '#submit' => array(
    'mymodule_previous_submit'
  ),
  '#buttontype' => 'button',
  '#value' => '<i class="icon-chevron-left"></i> ' . t('Previous Step'),
);

$form['next'] = array(
  '#type' => 'submit',
  '#name' => 'next',
  '#submit' => array(
    'mymodule_next_submit'
  ),
  '#buttontype' => 'button',
  '#value' => t('Next Step') . ' <i class="icon-chevron-right"></i>',
);

All of this generated the following output on the form.

<button class="form-submit" type="submit" id="edit-prev" name="prev"><i class="icon-chevron-left"></i> Previous Step</button>
<button class="pull-right form-submit" type="submit" id="edit-next" name="next">Next Step <i class="icon-chevron-right"></i></button>

This all worked fine on forms that contained a single button element (like the first form in the multi step process) but it all broke down if another button or submit element was present on the form. It seemed as if when the form was submitted that it either did nothing or went back a page. None of the correct validation or submission functions were being run either, so I had to delve deeper.

After lots of digging around and following the form code execution I managed to figure out that Drupal wasn't able to see what button had been clicked on and so assumed that the first button defined in the form was the correct element. This tied in with the behaviour I was seeing as the previous button was being executed first, even if the next button was being clicked on. Some pages of the form had "Add new item" AJAX buttons on them that were being picked up first by the form processing, meaning that none of the correct functions were being processed.

The code that is causing this is in the form_builder() function. The triggering_element item in the $form_state array is forced to be the first button that is found on the form (if it hasn't been set) before the form then processes the validation and submit functions.

function form_builder($form_id, &$element, &$form_state) {

  // ... snip
  
    if (isset($element['#type']) && $element['#type'] == 'form') {
    
    // ... snip
    
    if (!$form_state['programmed'] && !isset($form_state['triggering_element']) && !empty($form_state['buttons'])) {
      $form_state['triggering_element'] = $form_state['buttons'][0];
    }

    // If the triggering element specifies "button-level" validation and submit
    // handlers to run instead of the default form-level ones, then add those to
    // the form state.
    foreach (array('validate', 'submit') as $type) {
      if (isset($form_state['triggering_element']['#' . $type])) {
        $form_state[$type . '_handlers'] = $form_state['triggering_element']['#' . $type];
      }
    }
    
    // ... snip

   }

  // ... snip
}

I figured out that I could get the code to execute in the way I wanted by using the #after_build property of the form. This is run as the form is processed and allows me to add the correct setting to the $form_state array before it hits the code above.

$form['#after_build'][] = 'mymodule_force_triggering_element';

The function in the #after_build element is used to figure out which button has been clicked on. The correct button was present in the input element in the $form_state array so a simple bit of logic allowed me to add the correct triggering_element for the form state.

function mymodule_force_triggering_element($form, &$form_state) {
  if (isset($form_state['input']['next'])) {
    $form_state['triggering_element'] = $form['next'];
  } elseif (isset($form_state['input']['prev'])) {
    $form_state['triggering_element'] = $form['prev'];
  }
  return $form;
}

After this, the form runs as normal with the correct buttons running the correct behaviours. I hope this helps out other Drupal devs who have had the same issue.