Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Query Parameters in JavaScript?
Query parameters are key-value pairs appended to URLs after a question mark (?). They're essential for passing data between web pages, implementing search functionality, and creating dynamic URLs. For example, when you search on Amazon, your search term becomes a query parameter in the URL.
JavaScript provides several methods to create query parameters programmatically. This is useful when building search features, filtering options, or any functionality that needs to modify URLs based on user input.
Using encodeURIComponent() Method
The encodeURIComponent() method encodes special characters in URL components. For example, spaces become %20, and other special characters are properly encoded to ensure valid URLs.
Syntax
queryString += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
In the syntax above, key and value represent the parameter name and its value. The = character separates keys from values, while & separates multiple parameters.
Example: Creating Query Parameters from Object Data
This example demonstrates how to convert an object into query parameters using a for-in loop:
<html>
<body>
<h2>Using encodeURIComponent() to Create Query Parameters</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let objectData = {
'search': 'JavaScript Tutorial',
'category': 'web development',
'level': 'beginner'
};
let queryString = "";
for (let key in objectData) {
queryString += encodeURIComponent(key) + '=' +
encodeURIComponent(objectData[key]) + '&';
}
// Remove the last '&' character
queryString = queryString.slice(0, -1);
output.innerHTML = "Query parameters: " + queryString;
</script>
</body>
</html>
Query parameters: search=JavaScript%20Tutorial&category=web%20development&level=beginner
Using URLSearchParams API (Modern Approach)
The URLSearchParams API provides a cleaner, more modern way to work with query parameters:
<html>
<body>
<h2>Using URLSearchParams API</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let params = new URLSearchParams();
params.append('search', 'JavaScript Tutorial');
params.append('category', 'web development');
params.append('level', 'beginner');
let queryString = params.toString();
output.innerHTML = "Query parameters: " + queryString;
</script>
</body>
</html>
Query parameters: search=JavaScript+Tutorial&category=web+development&level=beginner
Creating Query Parameters from Form Data
This practical example shows how to generate query parameters from form inputs:
<html>
<body>
<h2>Creating Query Parameters from Form</h2>
<form id="searchForm">
<input type="text" id="searchTerm" placeholder="Search term" value="JavaScript">
<select id="category">
<option value="tutorial">Tutorial</option>
<option value="reference">Reference</option>
</select>
<button type="button" onclick="createQueryParams()">Generate URL</button>
</form>
<div id="result"></div>
<script>
function createQueryParams() {
let searchTerm = document.getElementById('searchTerm').value;
let category = document.getElementById('category').value;
let params = new URLSearchParams();
params.append('q', searchTerm);
params.append('cat', category);
let fullURL = window.location.origin + '/search?' + params.toString();
document.getElementById('result').innerHTML =
'<strong>Generated URL:</strong> ' + fullURL;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Browser Support | Ease of Use | Best For |
|---|---|---|---|
| encodeURIComponent() | All browsers | Manual | Custom implementations |
| URLSearchParams | Modern browsers | Very easy | Most new projects |
Common Use Cases
- Search functionality on websites
- Filtering and sorting data
- Sharing URLs with specific states
- API query parameters
- Analytics and tracking parameters
Conclusion
Creating query parameters in JavaScript is essential for dynamic web applications. Use URLSearchParams for modern browsers as it handles encoding automatically, or encodeURIComponent() for broader compatibility. Both methods ensure your URLs are properly formatted and functional.
2K+ Views
