7

I want to disable the submit button after it is clicked to prevent multiple submissions. I have:

$form['show'] = [
'#type' => 'submit',
    '#value' => $textforsubmitbutton,
    '#name' => 'submit',
    '#attributes' => array("onclick" => "javascript: this.disabled = true;"
    ),
];

but this disabled the button completely. Using "onsubmit" in place of "onclick" doesn't change anything on the button. So maybe I need something like:

    '#attributes' => array("onclick" => "javascript: this.submit; this.disabled = true;"
    ),

How do i fix this?

5

For those wanting to disable the form submit button on load, try this:

$form['actions']['submit']['#attributes']['disabled']  = 'disabled';
1
  • Exactly what I was looking for, thanks. I was trying to use ['submit']['#disabled'] = TRUE;. – Elijah Lynn Apr 8 '19 at 7:41
4

In your context, this refers to the submit input element which doesn't have the method submit(). You can use some jQuery to disabled the element on click then find the form element to submit.

'#attributes' => array("onclick" => "
      jQuery(this).attr('disabled', true);
      jQuery(this).parents('form').submit();
"
2

I am using bootstrap - that's where i found the solution finally:

'#attributes' => array("onclick" => "
      jQuery(this).addClass('disabled');;
")

Works perfectly!

0

I faced the same issue. This works fine for me, although I don't like inlining this piece of js and would move it to a .js file.

$form['actions']['submit']['#attributes']['onclick'][] = "
  event.preventDefault();
  if (!form.reportValidity()) {
    form.reportValidity();
  }
  else {
    jQuery(this).after('<div class=\"ajax-progress ajax-progress-throbber\"><div 
      class=\"throbber\">&nbsp;</div></div>')
    jQuery(this).attr('disabled', true);
    jQuery(this).closest('form').submit();
  }
";

This adds the default ajax loading icon and disables the submit button. I did that for the custom Drupal commerce module. Also, this makes the default browser validation work using reportValidity(). Well, except for IE of course.

0

This might help https://www.drupal.org/project/inline_entity_form/issues/3160683

just simply insert drupal/core form JS to prevent the duplication issue.

$form['#attached']['library'][] = 'core/drupal.form';
-1

To remove the button in hook_form_alter() simply unset the submit action.

unset($form['actions']['submit']);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.