Drupal 7 craziness: Changing the Submit Button text once submitted

We have a form that requires a lot of processing on the server side. To improve usability we wanted to change the submit button text from ‘Cancel Walks’ to ‘Canceling…’ once the button is pressed, to reassure customers that the system is processing their request. Form is submitted natively, not through Ajax.

This should be simple. Simply bind a function to the form submission, and change the button text. Something like this:

Code that doesn’t work

Alternatively, you can bind to the button click event, and do the same, but this is more general as it captures other submission options (e.g. pressing the Enter key).

Indeed, once you press the button, the button text changes, and the form is submitted.

But it will not process. The Drupal form submission functions will not be called. My guess is that somewhere in the Drupal form logic, the button value (i.e. the text), carried as the ‘op’ is checked against the original form, and when there is no match, the logic decides not to process.

This is bizarre, and I have to admit that I failed to notice something was wrong, as it did change the button text, and it did submit…

Anyhow, what I did eventually was to hide the button once the form is submitted and present a different button instead. Something like this:

Change button text without breaking Drupal processing

Actually, the real code also takes care that the form will not be submitted twice, as Drupal doesn’t take care of this. It also makes sure not to include the button twice.

The full code

Its almost full code, you need to add this to one of your Drupal behaviours or simply to an encapsulating Document ready event.

We love Drupal. Its been good for us. But once in a while it also bites back.