Get URL Parameter Values from Query String in Javascript - Step by Step Guide

Sharing buttons:

Hi Welcome to Mrvirk.com. I'm your host Navjot Singh today I'm gonna talk

about how to get URL parameter values from your URL basically so this would be

something like if we expect to pass some parameter into our URL let's say I want

to pass a Geo and I'm gonna say it's UK or it's Ireland if I'm in Ireland I'll

say ie so right now we're not actually making any use of this but in this

tutorial what I'm gonna do is we're gonna actually write code to get this

and example I am passing in a Geo and a size parameter and that's that basically

kind of returns the value from taking the value from here and then returning

it down in the console so that's the sole purpose let's jump into code so

Before we jump in let me show you the tutorial so in this tutorial basically I

move through the solution the code and a little bit of explanation and I usually

keep improving the solution over time so do visit this tutorial I'll leave a link

to this in the video description below let's dig into the code so from this

tutorial I'll click on edit on code pan so what you can do is you can basically

go on code pan and actually edit the code by yourself let's actually look at

the example like how the solution is actually outputting so what I'm gonna do

here is I'm gonna say I'm gonna pass a parameter let's say name equals enough

Joad and if i refresh this page this should be able to fetch the name and

Prentiss okay so I read this before so what I have to do to get the

name from there would be war name equal URL dot so I'm gonna explain each bit

like what each function and etc etc is perm starts got name and now this should

be able to give us the name this is what I love about coding like you jump in you

run into errors and you solve it so it's saying issues with parsing URL

parameters cannot read properly get of undefined da-da-da-da-da I define the

name hmm actually what our code expects is it's expecting both and let's try to

print out the name value as well for example and I'll just say and plus name

does it print the name for us clear the console save give it a refresh it's not

liking gut okay so see here here I did a little bit of a

typo so search parents parameters so I'm not gonna edit this part because I like

to keep my videos real you do not want to kind of give you a content where I do

not make any mistakes so from here you can see we're able to get the URL

parameter value let's pass in the rest of the parameters to kind of get the

rest of the values and make it error-free

let's clear the console and we can say and gio equals let's say USA for this

example and we can say Desai's hey girls whatever large how did I save it yes

okay perfect that's printing fine for me I

can save that clear the console and run it again

perfect so USA this is the Geo this is the size and this is my name so that's

how we kind of got that let's dig into the code the best thing about this

example is you can actually go in on code plan actually add your own

parameter values add your own parameter define your own parameters like I did

for name whereas I already had these existing parameters I could have just

showed you that but we went through the path of adding that and we made mistakes

and we learn from that so what I'm doing here is calling the window dot onload

which basically kind of figure out when the page actually loads it's gonna call

this an ominous please forgive my pronunciation and English is not my

language a native language so we're gonna call this function or it's called

function expression it's not a function definition so I'm doing a little bit of

error handling here and you can see we're trying to do all this stuff and if

this doesn't happen we basically print an error so what I'm

saying here is wire URL string and window dot location dot H ref what this

does is it takes it actually fetches the URL and

signs this to this so in so to make the things dynamic we have done this so for

example if this could have been like this come on Dax and here we go so this

could had been something like this we can define URL string and you can see

the solution still works but the thing is this is not dynamic you cannot test

it this way you can test it this way which is much better that's why I like

the old version which is window that location that has ref we dynamically get

the URL and we change it to lowercase to kind of you know so in this case if I

would have passed like geo and I define it as geo that could have broken my

things if I wouldn't had don't lowercase so right now it will work fine if we

remove lowercase for example and we give it a save and refresh break yes so you

can see the Geo part bro that's what why I'm using that lower case that kind of

solves a problem for now depending upon your use case and this this may or may

not be applicable but for this use case it works fine and then what I do is I

basically use the URL object and I pass the URL string to it which is over this

yes and what we do from there is we define a name variable which we did

together and what I do is URL dot search parents got name name is this whatever

you define here is what you got to pass in here so you can see name you can say

geo you can see size let's take a quick look at search parents what

so Mozilla has the best documentation on this the URL search permit params

interface defines utility matters to work with the query string of a URL

which is awesome because this was not available previously but now in

JavaScript in the latest version I think es 5 this is available so which

is awesome so what we can do is we can basically use the utilities present at

the URL object level and that's what we're doing here so we're saying search

param which is a URL method which is available

to us because we set new URL and we pass in the URL string and then we say that

cat name get geo that cat sighs awesome and then we basically console it and

that's where where results gets printed and that's it guys it's a very very

simple way of doing things in 2019 and going forward from here whereas this is

not supported on Internet Explorer though if we look at the compatibility

so I'll I'll actually leave a link to this on the video description and on the

tutorial actually I'll leave the link at the tutorial level actually and you guys

can go in and look at it and you can see the compatibility here and see Internet

Explorer is not supported at all for any of the matters whereas for Chrome on 49

version on where's it supported for ad 17 and a rest of them and you can give

it a check from there so going back from there I'll leave the links here and

thanks again guys thanks for watching the video and I

really appreciate that please leave a like and subscribe the channel if this

helped you and please leave your comments so I can improve the content

going forward this is my website recom so do visit us occasionally if you

have time so this is where I post tutorials on technology mostly

JavaScript tutorials and a couple others thanks for watching and stay happy