Score:-3

Open new tab with external link using an image button

cn flag

I am making a custom module with a form that has an image button. The image button will open the external link with the value of a textfield inside the form. I have searched any possible solution in the internet but can't find a solution.

How do I code a submitForm button to open an external link with a form value of a textfield inside the form.

Below is my sample codes:

$form['search'] = [             
      '#type' => 'textfield', 
      '#title' => 'Search for',
      '#required' => TRUE
];

$form['submit'] = [
    '#type' => 'image_button',
    '#value' => $this->t(''),
    '#src' => 'modules/myModule/src/images/myImage.png',
    '#submit' => ['::submitForm'],
];

I also try to use these codes for the button but still no luck:

$form['submit'] = [
    '#type' => 'item',
    '#markup' => $this->t('
        <a href=\'https://www.google.com/search?%search\' target="_blank">
           <img width="30" height="30" border="0" align="center"  src=\'modules/myModule/src/images/myImage.png\'/>
        </a>', ['%search' => $search]),
];

Please note that these are not my actual codes but these are the concept of my codes.

Any comments and suggestions are welcome.

Thank you in advance.

Score:0
de flag

If you use the formtarget HTML attribute on your image button, submit will happen in a new browser tab. Here is a basic example:

public function buildForm(array $form, FormStateInterface $form_state) {
  $form['search'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Search for'),
    '#required' => TRUE,
  ];

  $form['image_button'] = [
    '#type' => 'image_button',
    '#value' => 'hello',
    '#src' => '/path/to/my/image',
    '#submit' => ['::mySubmitFunction'],
    '#attributes' => [
       // This attribute will open a new browser tab on form submission
      'formtarget' => '_blank' 
    ]
  ];

  return $form;
}

public function validateForm(array &$form, FormStateInterface $form_state) {
  // Do whatever form validation is needed
}

public function mySubmitFunction(array &$form, FormStateInterface $form_state) {
  $search = $form_state->getValue('search'); // Fetch 'search' field value
  // since we want to redirect to an external url, 
  // we need to use \Drupal\Core\Routing\TrustedRedirectResponse 
  // because redirect to external URL is not allowed by default
  $externalURL = \Drupal\Core\Url::fromUri('https://example.com', 
    ['query' => ['search' => $search]]
  );
  $response = new TrustedRedirectResponse($externalURL->toString());
  $form_state->setResponse($response);
}
Jeirod avatar
cn flag
Thank you, @misterdidi. I have another question about your code. Is the `query` in `$externalURL` added to the https://example.com? So it will be https://example.com`$search`?
misterdidi avatar
de flag
No, in my example, you'd end up with the URL https://example.com?search=my-search-value. If you want something like https://example.com/my-search-value you need to do something like `$externalURL = \Drupal\Core\Url::fromUri('https://example.com/' . $search);` (provided that you made sure that $search is url-friendly).
Jeirod avatar
cn flag
Thanks, @misterdidi. Now I know how to make it happen. Thank you very much. It really helps me a lot.
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.