Change submit buttons to images for a given form
This was originally posted in a support thread by Borek, but I believe it needs to be posted here as well. This works perfectly in Drupal 5.x.
I have a form function in my module that looks like this:
<?php
/**
* Contribution Form
*/
function ngplinks_form_contribute() {
$form = array();
$form['amount'] = array(
'#type' => 'textfield',
'#title' => t('Amount'),
'#default_value' => '',
'#size' => 7,
'#maxlength' => 256,
'#description' => NULL,
'#attributes' => NULL,
'#required' => TRUE,
);
if (variable_get('ngplinks_subscribe_inline', 1)) {
$form['amount']['#title'] = '';
$form['amount']['#default_value'] = t('Amount');
$form['amount']['#attributes'] = array('onclick' => "if(this.value=='". t('Amount') ."'){this.value='';}");
}
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Contribute'),
);
return $form;
}
?>Pretty simple form with a single field and a submit button. Now to change the submit button to an image, I created the following function in my template.php file (should be in your theme's folder, create it if you don't have one):
<?php
function phptemplate_ngplinks_form_contribute($form) {
$form['submit']['#theme'] = 'button';
$form['submit']['#button_type'] = 'image';
$form['submit']['#attributes'] = array(
'src' => base_path() . path_to_theme() . '/images/joanfitzgerald_actionbar_contribute.gif',
'alt' => t('Search'),
);
return drupal_render($form);
}
?>You should have one of those for each of the forms you wish to alter. Them make sure this generic theme function is also added to template.php to handle the theming of the buttons:
<?php
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'];
}
// My change is type="' . (($element['#button_type'] == "image") ? 'image' : 'submit' ) . '"
return '<input type="' . (($element['#button_type'] == "image") ? 'image' : 'submit' ) . '" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
}
?>That's all there is to it. Your form will now show your images instead of the default buttons and they will work as expected. Thanks to Borek, kingandy, and simmerz for this incredibly useful tip.
An alternative would be to
An alternative would be to use the method I describe on this page to add the image button to your form array and use a simple if check against $_POST to have it submit properly.
----------------------
Current Drupal project: http://www.ubercart.org
CSS Approach/Solution
It's possible, at least in some circumstances, to achieve these results with CSS only. The original thread (cited above) has a comment to that effect, but here's a direct link to the code that worked in our situation:
http://drupal.org/node/62647#comment-258485
Drew Gorton
Gorton Studios
"You should have one of
"You should have one of those for each of the forms you wish to alter. Them make sure this generic theme function is also added to template.php to handle the theming of the buttons"
I'm not sure what you mean by one for each of the forms I wish to alter.
I am assuming to do something with this function name :
function phptemplate_ngplinks_form_contribute($form)
But I'm unsure .
Please advise.