Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

html button won't open link in a new window/tab when using window.location

Enthusiast ,
Jul 01, 2024 Jul 01, 2024

When applying a link action to a button, I cannot get it to open in a new window/tab:

 

<button onclick="window.location.href='https://google.com';" target="_blank" type="button" class="btn btn-outline-primary btn-lg ctaBtn" style="margin-top: 1em;">Request Sample</button>

 

Can you please advise what must be applied to get the button link to open in a new window/tab?

 

Thanks.

291
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 01, 2024 Jul 01, 2024

Are you using Bootstrap? With all of those button classes, why not just change the button --> a and just have a stylized link that looks like a button? Then you can remove the javascript and use a href value.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 01, 2024 Jul 01, 2024

Adding to @r_tist's reply, the code would look like

 

<a href="https://google.com" class="btn btn-outline-primary btn-lg mt-4" target="_blank">Request Sample</a>

 

 

This code is semantically more correct than using a button element because of the following statements:

  • Links take the user to a new location, such as a new web page or new section of the current page. 
  • Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 01, 2024 Jul 01, 2024

Thank you for this clear explanation!

Very good.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 01, 2024 Jul 01, 2024
LATEST

FYI:  JavaScript uses different terms & syntax. For details, see below.

https://www.geeksforgeeks.org/how-to-open-url-in-new-tab-using-javascript/#

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines