How can I disable a Drupal form submit button when it is clicked to prevent double submission?

Sounds like a simple question. I've added a bit of jQuery magic:

$("#edit-save").click(function(event) {
  $(this).attr("disabled", "true");
});

However, once this is in place, my form submit handler doesn't get called.

This is a custom form on my own path defined in hook_menu:

$items['my_form'] = array(
  'title' => 'My form',
  'page callback' => 'drupal_get_form',
  'page arguments' => array('mymod_myform'),
  'type' => MENU_CALLBACK,
);

In the form, I have a submit button and a cancel button:

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

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

and I define my own submit handler:

$form['#su开发者_开发知识库bmit'][] = 'mymod_myform_submit';

I've put a bit of tracing code in the drupal_get_form() function to sniff the $_POST variable when the form is submitted. When the jQuery magic is disabled, the $_POST variable includes an "op" parameter:

Array
  (
    [op] = Save
    [form_build_id] => form-6e74c87390e3fc48d0bebd2f5193315b
    [form_token] => 33db6e34c0350e33c48861a63a38d45f
    [form_id] => dh_seo_workload_item_form
  )

but if I enable the jQuery magic to disable the submit button after it's been clicked, the "op" parameter is no longer included in the $_POST array, and so Drupal thinks the form has not been submitted.

I've seen the question at Prevent double submission of forms in jQuery, but am concerned that this seems like a really hacky fix, and there should be a better way.

Or you can do this, as a one-liner addition at the PHP form array level...

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Save'),
  '#attributes' => array(
    'onclick' => 'javascript:var s=this;setTimeout(function(){s.value="Saving...";s.disabled=true;},1);',
  ),
);

I fixed it this afternoon this way and was able to get the form information submitted with out issue:

$("#id_of_button").click(function() {
  var submit = $(this);
  setTimeout(function(){
    submit.attr('disabled','disabled')
  },1);
});

I think the fact that you're binding to the click event of the button means that the button gets disabled before the click event can bubble up to the form and cause a submit.

Our team found that disabling the submit button almost always creates problems for Internet Explorer. We made a tiny plugin to solve the issue; see code here: https://stackoverflow.com/a/4473801/4376

Just hide your submit button(display:none), and show another button already disabled instead. I think its less hacky than the rest of solutions for this problem. I usually just have 2 buttons on my page, one visible and the other one not, and onClick, just switch them up.

The problem is caused because disabled buttons don't trigger postbacks.