By SimonVlc on

Hi there,

reading a lot in drupal.org I created a module to theme the buttons of my comment forms to use images instead the grey boxes. All seems to work fine, until I test sending a comment or previewing it in IE. It simply doesn´t work, and redirects me to the /comment/reply page of the node.

Here is my module:

/**
 * form_alter hook, add the additional info to map the buttons to images
 */
function mis_forms_form_alter($form_id, &$form) {
  if ($form_id == 'comment_form'){
    $form['submit']['#theme'] = 'comment_button';
    $form['submit']['#button_type'] = 'image';
    $form['submit']['#attributes'] = array(
      'src' => base_path() . path_to_theme() . '/img/publicar-btn.gif',
      'alt' => t('publish')
    );

    $form['preview']['#theme'] = 'comment_button';
    $form['preview']['#button_type'] = 'image';
    $form['preview']['#attributes'] = array(
      'src' => base_path() . path_to_theme() . '/img/vistaprevia-btn.gif',
      'alt' => t('preview')
    );

  }
}

/**
 * effectively subsitute the buttons for images
 */
function phptemplate_comment_button($element) { 
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
  return '<input type="' . (($element['#button_type'] == "image") ? 'image' : 'submit' ) . '" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $el
ement['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
}

The code resultant for the buttons in html. Before:

<input type="submit" name="op" id="edit-preview" value="Preview comment"  class="form-submit" />
<input type="submit" name="op" id="edit-submit" value="Post comment"  class="form-submit" />

After:

<input type="image" name="op" id="edit-preview" value="Preview comment"  src="/sites/all/themes/custom/unibetclub/img/login-btn.gif" alt="Search" class="form-image" />
<input type="image" name="op" id="edit-submit" value="Post comment"  src="/sites/all/themes/custom/unibetclub/img/publicar-btn.gif" alt="Search" class="form-image" />

The above code only works in mozilla firefox. Anyone knows what can be the problem in IE? Thanks in advance, Simon.

⋅ Categories: Drupal 5.x

Comments

pescobar’s picture

pescobar commented

hi simon,

i've run into the same issue with the ecommerce cart... specifically in the update cart form with both 'update' and 'checkout' buttons on it at the same time

found this link that describes the problem:

http://lists.evolt.org/archive/Week-of-Mon-20041108/166064.html

to work around it, i have added an onlick even to the submit images that sets the value of the 'op' variable correctly when in IE only

it seems to work ok but is an ugly hack

anyone else have any ideas on something more elegant?

esco

SimonVlc’s picture

SimonVlc commented

Thanks a lot, I will try ;)!

lunarlogic’s picture

lunarlogic commented

Thanks for the info. I followed your suggestion to create an input button that takes an image type, and works in ie. Here is my code for reference. 

function phptemplate_button($element) {
  // following lines are copied directly from form.inc core file:

  //Make sure not to overwrite classes
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }

  // here the novelty begins: check if #button_type is normal submit button or image button
  switch($element['#button_type']) {
    case 'image':
      $button_type = 'image';
      // the submit button will be hidden because we're showing an image instead
      $submit_type = ' type="hidden" ';
      // if its an image, we need to add a hidden submit button to actually submit, when the image button gets clicked.
      $result .= '<input alt="Submit" type="' . $button_type . '" onclick="document.getElementById(\'' . $element['#attributes']['alt'] . '-'. $element['#id']. '\').submit()" ';
          if (!empty($element['#attributes']))
          {
              foreach ($element['#attributes'] as $attr => $value)
              {
                  if ($attr == 'src')
                  {
                      $result .= ' '.$attr.'="'.$value.'"';
                  }
              }
          }
          $result .= ' />';
      break;
    default:
      $button_type = 'submit';
      // the submit button will NOT be hidden because we're showing NOT showing an image instead
      $submit_type = ' type="submit" ';
      break;
  }

  $result .= '<input ' . $submit_type . 'id="' . $element['#attributes']['alt'] . '-'. $element['#id'].'" name="'. $element['#name'] .'"  value="'. check_plain($element['#value']) .'"';
  if (!empty($element['#attributes']))
  {
      foreach ($element['#attributes'] as $attr => $value)
      {
           //these were already set
          if ($attr != 'id' && $attr != 'name' && $attr != 'type' && $attr != 'value')
          {
              //if the submit type is an image, we already added the src field to the image button, so don't add it here.
              if(!($element['#button_type'] == 'image'  && $attr == 'src'))
              {
                $result .= ' '.$attr.'="'.$value.'"';
              }
          }
      }
  }
  $result .= ' />';

  return $result;
}