Redirect to another Page with Parameters using JavaScript

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

# Redirect to another Page with Parameters using JavaScript

To redirect to another page with parameters:

Construct the URL with query parameters.
Set the window.location.href property to redirect to the page with parameters.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <button id="btn">Redirect with params</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', () => {
  const url = 'https://example.com';
  window.location.href = `${url}?key1=value1&key2=value2`;
});

redirect to another page with parameters

The code for this article is available on GitHub

The page redirects to the following URL:

https://example.com?key1=value1&key2=value2

The key1 parameter has a value of value1 and the key2 parameter has a value of value2.

Notice that there is a question mark ? between the URL and the query parameters.

If you need to access the query parameters from the new page, you would use the URLSearchParams object.

index.js

Copied!
const urlParams = new URLSearchParams(window.location.search);

// 👇️ key1=value1&key2=value2
console.log(urlParams.toString());

const key1 = urlParams.get('key1');
console.log(key1); // 👉️ value1

const key2 = urlParams.get('key2');
console.log(key2); // 👉️ value2

# Redirect to another page with parameters taken from input values

In some cases, you might need to take the names or the values of the parameters from the values of input fields.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input id="first" name="first" />

    <input id="second" name="second" />

    <button id="btn">Redirect with params</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

const firstInput = document.getElementById('first');
const secondInput = document.getElementById('second');

button.addEventListener('click', () => {
  const url = 'https://example.com';
  window.location.href = `${url}?key1=${firstInput.value}&key2=${secondInput.value}`;
});

redirect to another page with parameters from input

The code for this article is available on GitHub

We used the document.getElementById() method to select the button and the input elements and added a click event listener to the button.

Every time the button is clicked, the callback function is invoked.

index.js

Copied!
button.addEventListener('click', () => {
  const url = 'https://example.com';
  window.location.href = `${url}?key1=${firstInput.value}&key2=${secondInput.value}`;
});

In the callback function, we use a template literal to construct the URL with query parameters.

The dollar sign and curly braces syntax ${} is used to evaluate an expression or insert a variable.

The value of the key parameters gets set to the current value of the input fields.

You can also add a conditional statement to check if the input fields are not empty before redirecting.

index.js

Copied!
const button = document.getElementById('btn');

const firstInput = document.getElementById('first');
const secondInput = document.getElementById('second');

button.addEventListener('click', () => {
  const url = 'https://example.com';

  const value1 = firstInput.value;
  const value2 = secondInput.value;

  if (value1.trim() && value2.trim()) {
    window.location.href = `${url}?key1=${value1}&key2=${value2}`;
  }
});

check that input fields not empty before redirect

The code for this article is available on GitHub

We used the String.trim() method to trim the leading and trailing whitespace from the values of the input fields.

If calling the trim() method on the values returns a non-empty string, then we can safely set the window.location.href property.

# Redirect to another page with parameters taken from attributes

In some cases, you might also have to set the parameters based on the attributes of HTML elements.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="first" data-param="value-1">first div</div>
    <div id="second" data-param="value-2">second div</div>

    <button id="btn">Redirect with params</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

const firstDiv = document.getElementById('first');
const secondDiv = document.getElementById('second');

button.addEventListener('click', () => {
  const url = 'https://example.com';

  const firstValue = firstDiv.getAttribute('data-param');
  const secondValue = secondDiv.getAttribute('data-param');

  window.location.href = `${url}?key1=${firstValue}&key2=${secondValue}`;
});

redirect to another page with parameters from attributes

The code for this article is available on GitHub

Notice that we set the data-param attribute on the div elements.

index.html

Copied!
<div id="first" data-param="value-1">first div</div>
<div id="second" data-param="value-2">second div</div>

I've written a detailed guide on how to get elements by data attribute in JS.

The next step is to use the getAttribute() method to get the value of the data-param attribute in our JavaScript code.

index.js

Copied!
const firstValue = firstDiv.getAttribute('data-param');
const secondValue = secondDiv.getAttribute('data-param');

Once we have the value of the attribute, we can use it to construct the URL and redirect the user.

index.js

Copied!
window.location.href = `${url}?key1=${firstValue}&key2=${secondValue}`;

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Redirect to another Page with Parameters using JavaScript

# Additional Resources