Redirect With Parameters In Javascript (Simple Examples)

Welcome to a tutorial on how to redirect with parameters in Javascript. Need to redirect the user to another page and pass some data along?

That covers the quick basics, but read on for more examples!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) HTML FORM ONLY

<form action="1-form-only.html">
  <input type="text" name="name" required value="Jon">
  <input type="email" name="email" required value="jon@doe.com">
  <input type="submit" value="Go">
</form>

A quick reminder to those who may have forgotten, we don’t actually need Javascript to “redirect with parameters”. Just create an HTML form, give all the fields a name. The browser will do the rest of the magic on submission – This will “redirect” to  http://your-site.com/1-form-only.html?name=Jon&email=jon%40doe.com.

 

2) URL SEARCH PARAMETERS

<!-- (A) JAVASCRIPT -->
<script>
function redirect () {
  // (A1) URL SEARCH PARAMETERS
  var query = new URLSearchParams();
  query.append("name", "Jon");
  query.append("email", "jon@doe.com");
 
  // (A2) APPEND TO URL
  location.href = "2-search-params.html?" + query.toString();
}
</script>
 
<!-- (B) TEST BUTTON -->
<button onclick="redirect()">Go</button>

As in the introduction above:

• We create a var query = new URLSearchParams() object.
• Use query.append("KEY", "VALUE") to add parameters.
• Lastly, query.toString() to append all the parameters behind your URL.

 

 

3) MANUAL PARAMETERS

<script>
function redirect () {
  // (A1) SEARCH PARAMETERS
  var params = "name=" + encodeURIComponent("Jon");
  params += "&email=" + encodeURIComponent("jon@doe.com");
 
  // (A2) URL WITH SEARCH PARAMETERS
  var url = "3-manual.html?" + params;
 
  // (A3) REDIRECT
  location.href = url;
}
</script>
 
<!-- (B) TEST BUTTON -->
<button onclick="redirect()">Go</button>

Lastly, here is the old-school way to manually build the URL and query string.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

WHICH IS THE BEST METHOD?

Personally, I will stick with the modern new URLSearchParams(). This is just a lot more convenient and easier to work with. But if you have to support ancient browsers, the hidden form is not a bad idea.

 

 

LINKS & REFERENCES

• How To Build Query Strings In Javascript – Code Boxx
• URL Search Params – MDN
• Encode URI Component – MDN

 

INFOGRAPHIC CHEAT SHEET