SOLVED - image_button override causes form to fail/not submit

See #361103: Pager buttons not checked right and #241523: Allow back and next buttons to customised

Problem could be in way which browser send value of submit image button.

For example if value of submit button is "send" then for image submit button could be "send_x" and "send_y". Browser added x and y coordinate postfix.
If module control if submit was posted by checking it value then this test fail.

I hope this help.

The 3.x version now allows form_altering of these buttons because it is no longer dependent on the label of the button, per #361103: Pager buttons not checked right.

I am also having the same problem, but the site is live so I do not want to install a dev version of the module.

I have worked around the issue by using CSS backgrounds instead of image buttons for the time being.

Any idea when we can expect a production release of 3.x?

I tried to form_alter override with version 3 beta, and it still isn't submitting the form, just refreshing. Is there something else I should be changing?

		$form['buttons']['submit']['#type'] = 'image_button';
		$form['buttons']['submit']['#src'] = 'sites/all/themes/ssb/images/btn-send.gif';

Hi,

I'm having this same issue in the 6.x-3.2 version. Here is my code inside of a custom module I am using:

function module_name_form_alter(&$form, &$form_state, $form_id) {

  if ($form_id == 'webform_client_form_130') {
    $form['actions']['submit']['#type'] = 'image_button';
    $form['actions']['submit']['#src'] = drupal_get_path('theme', 'theme_name').'/images/submit_btn.png';
  }

}

When I do this form alteration, the form is altered as I would expect, but when the form is submitted, nothing actually happens, no email, no entry in Results tab. My understanding from #3 is that this simple form alteration should work. Is there anything I'm missing?

Thanks,
Matt

I would suggest using CSS replacement on your buttons rather than using an #type = 'image'. I think the problem is more inline with what #4 suggests, which is that browsers do not submit the same values for image buttons as they do for normal ones. IE is particularly bad about submitting completely random text as the value instead of anything useful. It may be possible that forms with multiple buttons do not work with image buttons in Drupal, I'm not entirely sure.

http://www.ampsoft.net/webdesign-l/image-button.html

After playing with it a bit more, I ended up doing exactly what you suggest. I think your right in terms of form submission with image buttons vs submit buttons. Thanks for the link that was really useful, my CSS was exactly the same save for the text-indent style which is very useful. I was just setting the Submit button text to a space, but using text-indent is much better.

Btw, I'm kinda new at adjusting the status (although I did read teh handbook page), so please change to something more appropriate if need be.

Thanks,
Matt

hey, would you have any ideas how to style? webform's file upload field button?

I just want to show image instead of default button.

Any ideas on this one?

you should change name of the button,
default name for image_button is "submit" - webform requires "op" name

the solution is:

$form['submit']['#type'] = 'image_button';
$form['submit']['#attributes'] = array('src' => '/path_to_button/button_name.jpg');
$form['submit']['#name'] = 'op';

have a nice day

Hi

I'm trying to achieve the CSS override using CSS and webform 6.x-3.11. Sadly I'm confused ( again, doh ! ) as the page Quicksketch links to ( http://www.ampsoft.net/webdesign-l/image-button.html ) is targetting an html button, but the code Firebug is showing me for the submit button within my webform is :

<div id="edit-actions" class="form-actions form-wrapper">
  <input id="edit-submit-1" class="form-submit" type="submit" value="Submit" name="op">
</div>

There is no button element.

Any pointers appreciated.

Many thanks,

El B

The answer to my own question ( thanks m4olivei ) is to style the input element as the link suggests for a button. Simples.

El B

Not sure if the above is correct for D6, but it's definitely not right for D7.

Same idea, but different structure. You want something like this:

$form['actions']['submit']['#value'] = t(' ');
$form['actions']['submit']['#type'] = 'image_button';
$form['actions']['submit']['#name'] = 'op';
$form['actions']['submit']['#src'] = drupal_get_path('theme', 'theme_name'). 'images/submit_button.png';

As the original states, the "#name = op" part seems to be the critical missing bit when changing the type from "submit" to "image_button".

Thanks ndz, you saved me! Would like to know how you figured this out.

I used this override function in my template file for webform drupal 7:
solved the problem

/**
 * implimentation of hook_form_alter()
*/
function anfpt_form_webform_client_form_1_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'webform_client_form_1') {
    //dsm($form);
	$form['actions']['submit']['#src'] = drupal_get_path('theme', 'anfpt') . '/images/send.jpg';
	$form['actions']['submit']['#type'] = 'image_button';
	$form['actions']['submit']['#name'] = 'op';    
	$form['actions']['op'] = array(
	          '#type' => 'value',
	          '#value' => 'Submit',
	        );
  }
}

hey thank you so much.. i tried quite a number of ways already.. talked with some guys out there in drupal chat too but nothing helped.. and i just tried your tip and it worked.. I was trying to use hook_form_alter along with 'webform ajax' module and the form wasn't submitting. It worked only when I disabled the 'webform ajax' module, but i wanted to use Ajax..

here's my working code:

<?php
/**
* Change webform standard button to image button.
*/
function image_button_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'webform_client_form_53' || $form_id == 'webform_client_form_55' ) {    
	 $form['actions']['submit']['#type'] = 'image_button';
	 $form['actions']['submit']['#src'] = base_path() . drupal_get_path('theme', 'business') . '/images/save.jpg';
	 $form['actions']['submit']['#name'] = 'op';	
       } 
}