Adding HTML elements to a Drupal 7 submit button

Today I needed to add the html character "»" to a Drupal 7 form value. The first thing I did was alter the form and add the » character to the end of the submit button's value. Upon reloading the form, I noticed that instead of the character being displayed, the plaintext was displayed.

After doing a bit of searching I found the theme_button() function which was using the drupal_attributes() function to build the attributes for the submit button. Upon further inspection of drupal_attributes(), I discovered that all attributes were being run through Drupal's check_plain() function and making everything plain text. This is a good thing 99% of the time, but not for adding html to the submit button.

Solution

To make this work I needed to override the theme_button() function and force my html element onto the proper button. The code looks like this:

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';
  }
 
  // Check if this is the element we want to add our HTML $raquo; to.
  if($element['#id'] == 'edit-submit-vendor-inspector-providers') {
    $attributes = $element['#attributes'];
    // Loop through the $attributes and find the 'value' attribute.
    foreach ($attributes as $attribute => &$data) {
      $data = implode(' ', (array) $data);
      if($attribute == 'value') {
        // Run the value through check_plain and then append our &raquo; to the end of the value.
        $data = $attribute . '="' . check_plain($data) . ' &raquo;"';
      }
      else {
        $data = $attribute . '="' . check_plain($data) . '"';
      }
 
    }
    // Return the input.
    return '<input ' . implode(' ', $attributes) . ' />';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

Basically, we find the ID of the form element we want to add our html to then we build the input just like drupal_attributes would have. The only difference is that we append the $raquo; to the end of the 'value' attribute. The final result looks like this:

Adding HTML elements to a Drupal 7 submit button

Solution

Comments