0

I have HTML markup which is externally generated but I need to display in a form.

I've got the following code in a form controller:

public function buildForm(array $form, FormStateInterface $form_state){
    $form['phone_number'] = [
        '#type' => 'tel',
        '#title' => 'Example phone',
    ];

    $form['TEST-Cloze']   =   [
        '#markup'   =>  "<p><select><option value='[Walter]'>[Walter]</option><option value=' Hank'> Hank</option><option value=' Gus'> Gus</option><option value=' Jessie'> Jessie</option><option value=' Mike'> Mike</option></select> was diagnosed with cancer in his 50th year. He began working with <select><option value='Badger'>Badger</option><option value=' Skinny Pete'> Skinny Pete</option><option value=' [Jessie]'> [Jessie]</option><option value=' Tortuga'> Tortuga</option><option value=' Bogdan'> Bogdan</option></select> to produce <select><option value='cocaine'>cocaine</option><option value=' heronie'> heronie</option><option value=' opiods'> opiods</option><option value=' [amphetamines]'> [amphetamines]</option><option valu\nhis death. He eventually became involved with hardened criminal <select><option value='[Tuco]'>[Tuco]</option><option value=' Gomie'> Gomie</option><option value=' Bogdan'> Bogdan\noption><option value=' Todd'> Todd</option><option value=' Gale'> Gale</option></select> to help with the distribution of his illegally manufactured product.</p>"
        // '#markup'   =>  $question->processed
    ];

    $form['submit'] = [
        '#type' => 'submit',
        '#value' => $this->t('Submit'),
    ];

    return $form;
}

However, the output is completely stripped of markup and displays as plain text, as shown below: enter image description here

How can I get the markup printed?

UPDATE:

I am attempting to add my form element markup because of the complexity of having multiple drop-down lists in a single paragraph, such as displayed below:

enter image description here

I struggled to achieve this type form output using other form components which is why I began looking into the #markup component.

  • What are these form elements in there supposed to do? Wrapping them in a <p> tag? Why don't you swap the single quotes and double quotes? Why don't you simply add a '#type' => 'select' element and add a '#prefix' => '<p>' and '#suffix' => '</p>'? Why do all your options have a space in their value? Can you please update your question for clarification? – leymannx Sep 9 at 20:48
  • @leymannx: Thanks for your input. I hardly think spaces in the options impact on the big picture. As for using select types, I didn't use that because the output I'm trying to achieve is multiple selects in a single paragraph. I added an update to my question as you requested to help clarify things. – sisko Sep 9 at 22:25
0

If this was just content I would replace #markup with #prefix. It will automatically render without escaping your HTML.

However, it seems like you don't just want to render this HTML. You actually want it to interact with the Drupal Forms API. As such, I would recommend that you parse the data you need from the source and construct the form element the recommend way:

form['example_select'] = [
  '#type' => 'select',
  '#title' => $this
    ->t('Select element'),
  '#options' => [
    '1' => $this
      ->t('One'),
    '2' => [
      '2.1' => $this
        ->t('Two point one'),
      '2.2' => $this
        ->t('Two point two'),
    ],
    '3' => $this
      ->t('Three'),
  ],
];
  • Thanks for your input but I'm trying to achieve a different and more complex form output which has multiple select lists in a paragraph. I added another image to my question showing an example of the output I'm trying to achieve. – sisko Sep 9 at 22:21
  • Thank you, the photo does add context. In my opinion, the simplest solution is to create psuedo-elements from the markup using something like the suggestion from @jaypan then insert properly formatted select form elements where they are needed and use CSS to make the elements appear inline. – Isaiah Nixon Sep 10 at 15:33
0

You can pass a FormattableMarkup element as #markup:

$markup = new Drupal\Component\Render\FormattableMarkup("<p>Some string with <em>HTML markup</em></p>");

$form['TEST-Cloze'] = [
  '#markup' => $markup,
];

Note that I didn't use the text from your example, as you would be better off using the Form API to build your elements. Rather the example I gave is one that can be used for other string that has HTML in it. But even with my example, I would still do it like this, to allow the string to be translated:

$form['TEST-Cloze'] = [
  '#prefix' => '<p>',
  '#suffix' => '</p>',
  '#markup' => t('Some string with <em>HTML markup</em>'),
];

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.