How to create an image button that behaves like a button in drupal 7?

Question

How I want it to work:

I have list of buttons(type button) that trigger an Ajax call that add the that item to a list. This works as exactly as I want it except for the button looks ugly .

The problem:

When I try to replace the "button" with an "image button" the form is submitted, which is not what I want. Is there a way to add an image to a button that do not trigger a submit? Can I disable the submit for "image button"? Or shall I add the image using css on the button?

What is the difference between "button", "image button" and "submit"?

Answer 1

To make the type image_button act like an button is looked in system.module and found "'#executes_submit_callback' => TRUE", so change this to false will prevent submit function to be called on your image_button.

Code from system.module:

$types['button'] = array(
    '#input' => TRUE,
    '#name' => 'op',
    '#button_type' => 'submit',
    '#executes_submit_callback' => FALSE,
    '#limit_validation_errors' => FALSE,
    '#process' => array('ajax_process_form'),
    '#theme_wrappers' => array('button'),
);
$types['image_button'] = array(
    '#input' => TRUE,
    '#button_type' => 'submit',
    '#executes_submit_callback' => TRUE,   // <--- This is why submit is triggered
    '#limit_validation_errors' => FALSE,
    '#process' => array('ajax_process_form'),
    '#return_value' => TRUE,
    '#has_garbage_value' => TRUE,
    '#src' => NULL,
    '#theme_wrappers' => array('image_button'),
);

Another thing that you might encounter is the validation error, to remove it just add the "'#validate' => array()" or if you want to run validation but ignore errors use "#limit_validation_errors' => array()". This also apply for button.

Here is an example where you can experiment the above things and see when the validation and submit callback is triggered. Also a checkbox is included to show when validation errors occurs.

function button_menu()
{
    $items = array();

    $items['button'] = array(
        'title'           => 'Button',
        'page callback'   => 'drupal_get_form',
        'page arguments'  => array('button_form'),
        'access callback' => array(TRUE),
        'type'            => MENU_CALLBACK,
    );

    return $items;
}

function button_form($form, &$form_state)
{
    // Add to prove the point of how validation is working
    $form['checkbox'] = array(
        '#type'          => 'checkbox',
        '#title'         => t('checkbox'),
        '#default_value' => FALSE,
    );

    $form['button'] = array(
        '#id'       => 'button_1',
        '#type'     => 'button',
        '#name'     => 'test1',
        '#value'    => 'test1',
        //'#validate' => array(),  // This line will remove validation completely
        '#limit_validation_errors'  => array(), // This line will run validation but ignore any errors
        '#ajax'     => array(
            'callback' => 'button_test_callback',
            'wrapper'  => 'wrapper',
            'method'   => 'replace',
            'effect'   => 'fade',
        ),
    );

    $form['image_button'] = array(
        '#id'                       => 'image_button_1',
        '#type'                     => 'image_button',
        '#src'                      => '/themes/bartik/logo.png', // hope you still have bartik theme
        '#executes_submit_callback' => FALSE,   // This line removes the submit callback
        //'#validate' => array(),               // This line will remove validation completely
        '#limit_validation_errors'  => array(), // This line will run validation but ignore any errors
        '#ajax'                     => array(
            'callback' => 'button_test_callback',
            'wrapper'  => 'wrapper',
            'method'   => 'replace',
            'effect'   => 'fade',
        ),
    );

    // Just some code to show what button was pressed
    if (array_key_exists('triggering_element', $form_state) &&
        ($form_state['triggering_element']['#id'] == 'button_1' || $form_state['triggering_element']['#id'] == 'image_button_1'))
    {
        $form['markup'] = array(
            '#type' => 'markup',
            '#markup' => '<div id="wrapper"><p>'. $form_state['triggering_element']['#id'] .'</p></div>',
        );
    }
    else {
        $form['markup'] = array(
            '#type' => 'markup',
            '#markup' => '<div id="wrapper"><p>nothing</p></div>',
        );
    }

    $form['submit'] = array(
        '#type'  => 'submit',
        '#value' => 'Submit',
    );

    return $form;
}

function button_test_callback($form, $form_state)
{
    return $form['markup'];
}

function button_form_validate($form, &$form_state)
{
    // To display when validation is triggered
    drupal_set_message('button_form_validate');

    // Only when submit button is pressed we care about this error.
    if ( $form_state['values']['checkbox'] == 0) {
        form_set_error('checkbox', 'checkbox not checked');
    }

}

function button_form_submit($form, &$form_state)
{
    // To display when submit is triggered
    drupal_set_message('button_form_submit');
}