Last updated: 20th May 2025
Passing data between web pages is often done using URL parameters, also known as query strings. These parameters enable the transfer of information via the URL and can include single or multiple values. In JavaScript, when redirecting to another page, you can append parameters to the URL to send specific data dynamically. In this guide, I'll demonstrate how to redirect to another page with multiple parameters using JavaScript, ensuring efficient and seamless navigation.To redirect to another page in JavaScript, you can use window.location.href property. "window.location" will also work. In-addition, you can use window.open() method.
Here’s an example using window.location.href property.
window.location.href = "https://www.encodedna.com/";
Redirect to another Page with Multiple Parameters
Now, to insert multiple parameters to the URL, you’ll have to define parameters with values using the ? (Question mark) and & (ampersand) symbols before redirecting. For example,
<script> let redirectPage = () => { const url = "https://www yourwebsite com/content/ocncontent?userid=43&contentid=9"; window.location.href = url; } </script>
In the above example, I am passing two parameters namely "userid" and "contentid". The values are hardcoded. You can however get (or extract) the values for the URL parameters dynamically from textbox or input boxes. For example,
<body> <!-- I have two textbox for each paremeter.--> <p><input type='text' id='book' /></p> <p><input type='text' id='b_name' /></p> <input type='button' value='Click to Redirect' onclick='redirectPage()' /> </body> <script> const redirectPage = () => { // Get textbox values. const v1 = document.getElementById('book')?.value; const v2 = document.getElementById('b_name')?.value; if (!v1 || !v2) { console.error("Missing required parameters"); return; } const baseUrl = "https://www.encodedna.com/javascript/demo/"; const page = "check-if-url-contains-a-given-string-using-javascript.htm"; const params = new URLSearchParams({ book: v1, name: v2 }).toString(); window.location.href = `${baseUrl}${page}?${params}`; }; </script>
The above URL has two parameters "book" and "name", for I am extracting the values from the two input boxes.
Let's execute the above code and see what happens. Click the button below to redirect to another page. See the URL after the page redirects.