Duplicate Button Appears While Theming Buttons

By dotmundo on 24 Sep 2016 at 18:20 UTC

Hello,

I am developing a custom form in Drupal 8.1.9. I need to theme my submit button and decided to convert it to a . My code is as follows:

buildForm

        // Submit
        $form['actions']['submit'] = array(
            '#type' => 'submit',
            '#value' => t('Submit Form'),
            '#submit' => array('submitForm'),
        );

hook_form_alter

    if ( isset ($form['actions']) ) {
        foreach ($form['actions'] as $key => $value) {
            if ( in_array( $value['#type'], array('submit', 'button')) ) {
                $form['actions'][$key]['#theme'] = array('my_theme_button');
            }
        }
    }

hook_theme

        'hb_forms_button' => array (
            'render element' => 'values',
            'template' => 'input--button',
        ),

input--button.html.twig

{%
set classes = [
   'btn',
   'btn-block',
   'btn-info',
 ]
%}
<div class="form-group text-center">
	<div class="col-sm-12 controls">
		<button{{ attributes.addClass(classes) }}>{{ values['#value'] }}</button>
	</div>
</div>

The result is which I cannot show you is that my new stylized button appears but next to it is the another one that is generated by Drupal. Both have the same label. One is an where as the one is a . Any ideas would be great as I would hate to resort to using style to hide the former.

Thanks

Comments

I really could use some help

dotmundo commented 26 September 2016 at 01:56

I really could use some help here please

I haven't worked enough with

Jaypan commented 26 September 2016 at 03:46

I haven't worked enough with Drupal 8 to know for sure, but in D6 and D7, you need to call render() on form elements, which will generate the HTML tag, but you are creating your own HTML tag and inserting the button contents. Since render() is not called, the system thinks it's not rendered, and renders it after the fact. You'll probably need to render the button in a preprocess function, and output that in your template.