Attach #ajax to submit button created in hook_form_alter with #markup

Question

I created a custom submit button for the user-login form using #markup because I couldn't alter submit button html to resemble what I needed. The second custom submit button with the needed html is added with:

$form['submit2'] = array(
  '#markup' => '<p class="submit"><button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button></p>');

I then added a "hideme" class to the orginal button with $form['actions']['submit'] ['#attributes'] (deleting it stopped the other submit from working).

So far so good. But now I would like to validate the login form using AJAX. Only if I add the #ajax key to $form['submit2'], the callback is never called. This only seems to work with regular form items.

Is it possible to trigger an Ajax callback on a #markup element (in hook_form_alter)? I'm using Drupal 7.

Answer 1

You cannot, since the #ajax attribute is not used for the markup item. You can use an image_button form element.

If the image_button form element doesn't render as you want and it is not possible to alter it the way you want, you need to implement a new form element with hook_element_info(), using the definition of the image_button form element as guide.

  $types['image_button'] = array(
    '#input' => TRUE,
    '#button_type' => 'submit',
    '#executes_submit_callback' => TRUE,
    '#limit_validation_errors' => FALSE,
    '#process' => array('ajax_process_form'),
    '#return_value' => TRUE,
    '#has_garbage_value' => TRUE,
    '#src' => NULL,
    '#theme_wrappers' => array('image_button'),
  );

The theme function that renders that form element is theme_image_button(). Changing the value of #theme_wrappers, you can alter the way your form element is rendered.
Keep in mind that theme wrappers, as any other theme functions, need to be declared with hook_theme().