JavaScript Get URL Parameter Value By Name
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of JavaScript get URL parameter value by name, here we created an example URL with a name and age value.
We will use the JavaScript URLSearchParam object to get the URL parameter values by name.
By using URLSearchParam, we can add, remove or retrieve key-value pairs in a URL by manipulating the URL. We can change the existing string or create a new string by using this.
Step By Step Guide On JavaScript Get URL Parameter Value By Name :-
In the example below, we are going to see an example. Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript get URL parameter value by name </title>
<style>
body {
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript get URL parameter value by name </h3>
<div>
<input type="text" placeholder="Enter parameter">
<button>
click!!
</button>
<p>
</p>
</div>
<script>
let url_String = 'http://www.example.com/xyz.php?name=rahul&age=19' ;
let btn = document.querySelector('button')
let input = document.querySelector('input')
let show = document.querySelector('p')
btn.addEventListener('click',() =>{
let url = new URL(url_String) ;
let search_String = url.search.slice(1) ;
let search_Parameters = new URLSearchParams(search_String) ;
let input_Parameter = input.value ;
if(search_Parameters.has(input_Parameter)){
show.innerHTML = search_Parameters.get(input_Parameter) ;
}
else {
show.innerHTML = "wrong patameter" ;
}
}) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a<input> tag with type ‘text’ and placeholder. Then create a <button> too.
- Create a <p> tag that will show the name parameter value
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Using document.querySelector() for both the <button> and <input> tag and also with the <p> tag.
- Add the .addEventListner() tag with ta btn.
- Use the URL with a new URL string.
- Now use slice() method.
- URLSearchParam to search the parameter.
- Add an if-else statement for, if the search parameter is present on the input parameter then show the result by .innerHTML tag, or else display the wrong parameter.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to get URL parameter values by name using JavaScript.
I hope this article on JavaScript get URL parameter value by name helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
