To redirect with parameters in Javascript:<\/p>\n
- \n
var query = new URLSearchParams();<\/code><\/li>\nquery.append(\"KEY\", \"VALUE);<\/code><\/li>\nlocation.href = \"http:\/\/site.com\/page?\" + query.toString();<\/code><\/li>\n<\/ul>\n<\/div>\nThat covers the quick basics, but read on for more examples!<\/p>\n
<\/p>\n
<\/div>\n<\/p>\n
TLDR – QUICK SLIDES<\/h2>\n
[web_stories_embed url=”https:\/\/code-boxx.com\/web-stories\/redirect-parameters-javascript\/” title=”Redirect With Parameters In Javascript” poster=”https:\/\/code-boxx.com\/wp-content\/uploads\/2021\/11\/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]<\/p>\n
Fullscreen Mode – Click Here<\/a><\/p>\n
<\/p>\n
TABLE OF CONTENTS<\/h2>\n
\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-refresh-ccw.svg\")
Redirect Parameters<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\")
Download & Notes<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\")
Extra Bits & Links<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\")
The End<\/a><\/div>\n<\/div>\n<\/p>\n
<\/div>\n<\/p>\n
\nREDIRECT WITH PARAMETERS<\/h2>\n
<\/p>\nAll right, let us now get into more examples on how to redirect with parameters in Javascript.<\/p>\n<\/div>\n
<\/p>\n
1) HTML FORM ONLY<\/span><\/h3>\n
1-form-only.html<\/div>\n<form action=\"1-form-only.html\">\r\n <input type=\"text\" name=\"name\" required value=\"Jon\">\r\n <input type=\"email\" name=\"email\" required value=\"jon@doe.com\">\r\n <input type=\"submit\" value=\"Go\">\r\n<\/form><\/code><\/pre>\nA 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<\/code>. The browser will do the rest of the magic on submission – This will “redirect” to\u00a0http:\/\/your-site.com\/1-form-only.html?name=Jon&email=jon%40doe.com<\/code>.<\/p>\n<\/p>\n
2) URL SEARCH PARAMETERS<\/span><\/h3>\n
2-search.params.html<\/div>\n<!-- (A) JAVASCRIPT -->\r\n<script>\r\nfunction redirect () {\r\n \/\/ (A1) URL SEARCH PARAMETERS\r\n var query = new URLSearchParams();\r\n query.append(\"name\", \"Jon\");\r\n query.append(\"email\", \"jon@doe.com\");\r\n \r\n \/\/ (A2) APPEND TO URL\r\n location.href = \"2-search-params.html?\" + query.toString();\r\n}\r\n<\/script>\r\n \r\n<!-- (B) TEST BUTTON -->\r\n<button onclick=\"redirect()\">Go<\/button><\/code><\/pre>\nAs in the introduction above:<\/p>\n
- \n
- We create a
var query = new URLSearchParams()<\/code> object.<\/li>\n- Use
query.append(\"KEY\", \"VALUE\")<\/code> to add parameters.<\/li>\n- Lastly,
query.toString()<\/code> to append all the parameters behind your URL.<\/li>\n<\/ul>\n<\/p>\n
<\/div>\n<\/p>\n
3) MANUAL PARAMETERS<\/span><\/h3>\n
3-manual.html<\/div>\n<script>\r\nfunction redirect () {\r\n \/\/ (A1) SEARCH PARAMETERS\r\n var params = \"name=\" + encodeURIComponent(\"Jon\");\r\n params += \"&email=\" + encodeURIComponent(\"jon@doe.com\");\r\n \r\n \/\/ (A2) URL WITH SEARCH PARAMETERS\r\n var url = \"3-manual.html?\" + params;\r\n \r\n \/\/ (A3) REDIRECT\r\n location.href = url;\r\n}\r\n<\/script>\r\n \r\n<!-- (B) TEST BUTTON -->\r\n<button onclick=\"redirect()\">Go<\/button><\/code><\/pre>\nLastly, here is the old-school way to manually build the URL and query string.<\/p>\n
<\/p>\n
\nDOWNLOAD & NOTES<\/h2>\n
<\/p>\nHere is the download link to the example code, so you don’t have to copy-paste everything.<\/p>\n<\/div>\n
<\/p>\n
SORRY FOR THE ADS...<\/span><\/h3>\r\n
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.<\/p>\r\n\r\n
Buy Me A Coffee<\/a> Code Boxx eBooks<\/a><\/p>\n
<\/p>\n
EXAMPLE CODE DOWNLOAD<\/span><\/h3>\n
Click here for the source code on GitHub gist<\/a>, 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.<\/p>\n
<\/p>\n
\nEXTRA BITS & LINKS<\/h2>\n
<\/p>\nThat’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.<\/p>\n<\/div>\n
<\/p>\n
WHICH IS THE BEST METHOD?<\/span><\/h3>\n
Personally, I will stick with the modern
new URLSearchParams()<\/code>. 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.<\/p>\n<\/p>\n
<\/div>\n<\/p>\n
LINKS & REFERENCES<\/span><\/h3>\n
- \n
- How To Build Query Strings In Javascript<\/a> – Code Boxx<\/li>\n
- URL Search Params<\/a> – MDN<\/li>\n
- Encode URI Component<\/a> – MDN<\/li>\n<\/ul>\n
<\/p>\n
INFOGRAPHIC CHEAT SHEET<\/span><\/h3>\n
![\"\"](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/02\/JS-redirect-params230703-sm-R.webp\")
<\/a>Javascript Redirect With Parameters (click to enlarge)<\/span><\/figcaption><\/figure>\n <\/p>\n
\nTHE END<\/h2>\n
<\/p>\nThank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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? To redirect with parameters in Javascript: var query = new URLSearchParams(); query.append(“KEY”, “VALUE); location.href = “http:\/\/site.com\/page?” + query.toString(); That covers the quick basics, but read on for more examples! […]<\/p>\n","protected":false},"author":1,"featured_media":21210,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[],"class_list":["post-3468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js"],"_links":{"self":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/3468"}],"collection":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/comments?post=3468"}],"version-history":[{"count":0,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/3468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media\/21210"}],"wp:attachment":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media?parent=3468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/categories?post=3468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/tags?post=3468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- URL Search Params<\/a> – MDN<\/li>\n
- Use