How to make an input type=button act like a hyperlink and redirect using a GET request?

javascript

onclick-event

redirect

get-request

byAnton Shumikhin·Aug 22, 2024

Redirect upon button click using:

<input type="button" value="Go" onclick="window.location='https://example.com'">

This code piece will direct your browser to https://example.com on a button click with a good old GET request.

When to use Javascript for redirection

The Fast answer is using Javascript to redirect the user, ideal when:

You need to mimic button functionality but want to avoid the regular form submission.
A simple, no-nonsense GET request to a specific URL is called upon.
Dealing with Javascript libraries or complex frameworks is so not your groove.

Alternatives for button-like hyperlinks

If the onclick Javascript flavor isn't to your taste, the HTML menu offers a few goodies:

The Disguised Anchor: The humble <a> tag can dress up as a button, thanks to a bit of CSS magic. Hyperlink capabilities of <a> intact.
```
<a href="https://example.com" class="button-like">Go</a>
```
The Form Route: A traditional way using an <input type="submit"> inside a <form> tag. Just remember to set the form method to "get".
```
<form action="https://example.com">
  <input type="submit" value="Go">
</form>
```

Including parameters in GET requests

There's a twist in the plot - you can encode parameters in the URL when you're feeling extra loggerheaded:

<input type="button" value="Search" onclick="location.href='https://example.com?query=searchTerm';">

This passes a search term as a parameter along with a dance to the server.

Handling complex redirections with onclick

The onclick event in Javascript can swiftly turn into a potent tool for advancing navigation:

Conditional Redirection: Yes, the button can think before it leaps. Based on user input or other dynamic factors, if-else can be a wise option.

function redirectUser() {
  if (userHasPermissions) {
    // Welcome to the VIP lounge
    location.href = 'https://example.com/private';
  } else {
    // Oops, your name's not on the list!
    alert('Access Denied!');
  }
}

Appending Query Parameter: That little button can carry data all the way from an input field to the URL. Talk about sneaky!

function searchWithParams() {
  const searchTerm = document.getElementById('searchInput').value;
  // Even buttons use modern packing techniques - say hello to URI encoding
  location.href = `https://example.com?query=${encodeURIComponent(searchTerm)}`;
}

Champion Navigator: Want to go back upon faltering at the form validity check? This bot's got your back!

document.getElementById('myButton').addEventListener('click', function(event) {
  if (formIsValid()) {
    // Clear to go!
    location.href = 'https://example.com';
  } else {
    // Hold up! Is that a typo?
    event.preventDefault();
    alert('Form is invalid.');
  }
});

SEO and UX: Bridging the gap

When it's not all about making buttons dance, consider SEO and UX principles:

Primary Navigation: Stick to <a> tags if you're targeting search engine robots, not Terminators🤖.
Inside Actions: For in-app actions, <button> or <input> can do the hustle.
Clarity in Action: A button should scream out its purpose - remember, your users are not psychic (unless they are, in which case, hello there!).