By Kevin


2017-01-24 16:34:38 8 Comments

Is it possible in Drupal 8 to change a regular form submit button from Drupal into a button tag?

This is the output I need to achieve:

<button type="button" class="search-box__button">
  <svg class="icon search-box__open">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/img/svg-sprite.svg#icon-search"></use>
  </svg>
</button>

2 comments

@leymannx 2017-03-01 13:04:32

You simply could use inline_template.

$build['hello']  = [
  '#type' => 'inline_template',
  '#template' => '<button type="button" class="search-box__button">
     <svg class="icon search-box__open">
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/img/svg-sprite.svg#icon-search"></use>
     </svg>
   </button>',
];

@Kevin 2017-03-01 13:38:55

Won't you lose anything added on by {{ attributes }}?

@leymannx 2017-03-01 13:41:37

I guess you would have to set your own attributes in the '#context' array.

@Kevin 2017-01-24 16:53:00

Well that was quick... I used my intuition and was able to accomplish it by doing the following:

In mytheme.theme:

/**
 * @param $suggestions
 * @param array $variables
 */
function mytheme_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];

  if (isset($element['#attributes']['data-twig-suggestion'])) {
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['data-twig-suggestion'];
  }
}

/**
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 * @param $form_id
 */
function mytheme_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form['#id'] == 'views-exposed-form-search-results') {  
    $form['actions']['submit']['#attributes']['data-twig-suggestion'] = 'search_results_submit';
    $form['actions']['submit']['#attributes']['class'][] = 'search-box__button';
  }
}

In input--submit--search-results-submit.html.twig

{#
/**
 * @file
 * Theme override for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * @see template_preprocess_input()
 */
#}
<button{{ attributes }}>
  <svg class="icon search-box__open">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/themes/custom/mytheme/build/img/svg-sprite.svg#icon-search"></use>
  </svg>
</button>

Form still submits and functions as expected. Is this the general approach or at least acceptable? I will go with this unless there is a better way.

@4k4 2017-01-24 17:16:02

Looks good. Don't think there is a twig only solution, so you need to do something like this. Theme suggestion like you did or one big input.html.twig with all input versions which you select by the attributes you set in form alter.

@Kevin 2017-01-24 17:23:21

I'll probably want to use a data-attribute on the tag instead of just the name, most likely.

@Kevin 2017-01-24 18:01:25

Yep - I changed it to a data attribute so it doesn't interfere with anything else that may be relying on the name attribute. Works great.

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Register form breaks after changing submit button value with jQuery

1 Answered Questions

[SOLVED] How to convert the drupal-entity tag into an img tag?

1 Answered Questions

[SOLVED] Why I can't use the same code from Drupal 7 in Drupal 8 to generate a button with FAPI?

  • 2017-03-15 00:33:20
  • Adrian Cid Almaguer
  • 875 View
  • 1 Score
  • 1 Answer
  • Tags:   8 forms

1 Answered Questions

[SOLVED] Form submit button with ajax, replace form with another one (error 500)

  • 2017-01-23 22:59:11
  • PolGraphic
  • 1529 View
  • 1 Score
  • 1 Answer
  • Tags:   8 forms ajax

1 Answered Questions

Customize Search Form Block Text

1 Answered Questions

[SOLVED] Change Form submit button's title

  • 2013-01-18 12:56:17
  • abd
  • 3297 View
  • 2 Score
  • 1 Answer
  • Tags:   7 forms

1 Answered Questions

[SOLVED] How do I reverse the order of submit and preview button?

  • 2015-09-17 05:18:36
  • jsh
  • 270 View
  • 0 Score
  • 1 Answer
  • Tags:   nodes forms

1 Answered Questions

[SOLVED] how to change value of submit button of comment form?

  • 2012-08-22 22:21:47
  • Sandesh Yadav
  • 1496 View
  • 1 Score
  • 1 Answer
  • Tags:   forms

1 Answered Questions

[SOLVED] Prevent replacing <input type="submit"> with <button>

  • 2014-12-18 20:11:35
  • gattermeier
  • 797 View
  • 1 Score
  • 1 Answer
  • Tags:   theming

1 Answered Questions

[SOLVED] Attach #ajax to submit button created in hook_form_alter with #markup

  • 2013-05-29 22:19:18
  • Whiskey
  • 925 View
  • 0 Score
  • 1 Answer
  • Tags:   7 ajax forms

Sponsored Content