The issue:
With the Bootstrap theme or subtheme enabled, Drupal form elements of '#type' = 'button' no longer perform their associated actions.
Steps to reproduce:
This should be reproduceable with any form that contains a 'button' type element. For testing purposes I have used the Style Guide module, as this provides themed examples of common form elements.
- Use simplytest.me or any clean install.
- Enable Bootstrap 7.x-3.x and Style Guide 7.x-1.1 (current recommended release).
- Navigate to admin/appearance/styleguide#form-button.
- Press the 'button' example button.
Expected outcome:
The form is validated and rebuilt according to any actions attached to the button. In this case, the style guide page is simply reloaded. This behaviour can be seen by viewing the style guide page for another installed theme.
Actual outcome:
Nothing happens.
Explanation:
This issue arises from a difference in the way buttons are treated in Drupal and regular HTML forms. It is understandable to think that a Drupal element of '#type' = 'button' should be rendered as an HTML element with attribute 'type'='button', but this is not the case. An HTML element of type 'button' has no default behaviour, and is mostly associated with client-side events. However, according to the Drupal Form API:
button
Description: Format an action button. When the button is pressed, the form will be submitted to Drupal, where it is validated and rebuilt. The submit handler is not invoked.
This states that the button should submit the HTML form to be validated and rebuilt. This will not happen if the button's HTML type attribute is set to 'button'. It needs to be 'type'='submit'.
Solution:
bootstrap_button should emulate the core theme_button and set the element's 'type' attribute to 'submit', allowing button elements to submit the HTML form.
Patch to follow
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | 2540452-button-with-ajax.patch | 660 bytes | jduhls |
| #4 | bootstrap-7.x-3.x-bootstrap_button_prevents_core_form_functionality-2540452-4.patch | 748 bytes | mangy.fox |
Comments
Comment #1
mangy.fox commentedPatch sets 'type' attribute of button element to 'submit'.
This is for 7.x-3.x branch.
Comment #2
mangy.fox commentedAdditional patch for 7.x-3.0 release.
Comment #3
markhalliwellI almost closed this as "works as designed", until I looked at core's function (thanks for that btw). Took me a second to realize that this is an actual issue. Not sure how it got this way other than it is an easy mistake to make, so I don't see the harm adding this back in.
However, I am a bit curious as to what how doing this real is valid for a real use case though (aside from the styleguide module. Most who set a button as
'#type' => 'button'in a form generally doesn't want it to go through Drupal to begin with (even for validation) as, like you said, because it's handled by the client side (i.e. JS). Why do buttons need to go through Drupal's validation? I'm not asking for justification for patch, just curious..Setting to CNW as 7.x-3.x should be overriding this in bootstrap_preprocess_button() instead.
Comment #4
mangy.fox commentedThanks Mark, I missed that the element_set_attributes had moved to the preprocess. Re-patched the correct file.
Re: use cases, the reason I originally came across this was using the Content Lock module. One of the pieces of functionality in this module is to add a cancel button on node pages. The purpose of this button is to navigate away from the page without saving any changes whilst also removing the temporary lock placed on the content. In this case the submit handler and main validation obviously do not need to be run, but other logic does, so a button is more appropriate than a submit.
You are right though, it does seem to be a lesser used piece of functionality, however it is one that is provided by core and should be retained.
Comment #6
markhalliwell@neardark, please verify this issue in 8.x-3.x, I didn't see the button code anymore and if I'm not mistake, this patch isn't needed there?
Comment #7
neardark commented@markcarver I've tested this 8.x and this issue doesn't manifest. Here's the output of a 'type' => 'button' form element:
<button data-drupal-selector="edit-button-submit" type="submit" id="edit-button-submit" name="op" value="Submit" class="button button--button js-form-submit form-submit btn btn-primary form-button">Submit</button>Comment #9
neardark commentedComment #10
markhalliwellAwesome, good enough for me. Thanks!
Comment #12
jduhls commentedIf ajax features have been added using FAPI then type should equal "button" because form submission is now handled by client-side js. Patch attached.
Comment #13
retiredpro commentedThanks, jduhls. Your patch addressed that I was having.