Menu
I am getting stuck on this. I want to make query string on dyanmic filters. Right now i have added to types of filter Select your favorite sports and Select your favorite food: .. So in future it will be more filters and it will be in check boxes type and selectbox only. So i want to make it fully dynamic. Here is my html code:-
<body>
<select class="getfilterchange" name="hobby">
<option value="">Select</option>
<option value="Chess">Chess</option>
<option value="Hockey">Hockey</option>
</select>
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
<br>
</body>
Here i have some try to jquery code :-
<script type="text/javascript">
$(document).ready(function() {
var names = [];
$(".getfilter").click(function(){
if(jQuery.inArray($(this).attr('name'), names )=='-1'){
names.push($(this).attr('name'));
}
var favorite = [];
$.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
favorite.push($(this).val());
});
console.log(names);
console.log(favorite);
});
});
My expected output is like below
?sport=football~baseball~cricket&food=choclate~biscuits
If user has selected food first then it should be like this :-
?food=choclate~biscuits&sport=football~baseball~cricket
Please help me how can i achieve this type of functionality note :- My filters will be dynamic means if i add more filters it will automatically embedded to query string. In image it's showing Getvalues button.. I want to get query string on click on checkbox. Forget about there is no button. Thanks
638
asked May 20 '26 13:05
The simplest way to build and send request with filter parameters is to submit form that contains the filter's controls to your server that is defined by the form's action attribute value. If you need to apply the filter every time the filter is changed, then just call .submit() method in the form change event handler.
If you need to build request URL manualy, then you could use .serialize() method. Just place your controls to a form, and it will be possible to get query string by the form serialization.
var staticUrl = '/the/path/of/request';
$("#filter").change(function() {
var queryString = $(this).serialize();
var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
console.log(url);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<form id="filter">
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
</form>The result query string is standard. It should be parsed correctly by PHP server. But if you need any special format, you could transform the string using regular expressions. For example, use following to separate several values of same field by ~ character:
var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
var queryString = $(this).serialize().replace(/(?<=([^\?\&\=]+=)([^\&\=]+))(\&\1)/g, delimiter);
var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
console.log(url);
});
You could see the transformation result using the regex101 snippet.
Note, a zero-width positive lookbehind assertion is used in the regular expression. It requires to browser support ES2018.
If it is not possible to use a zero-width positive lookbehind assertion, then you could use classical way: transform a set of form elements to an array of names and values using serializeArray method and then build query string from the array.
The serializeArray creates an item for each control. It is possible to group form values by field name using reduce method.
var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
var query = $(this)
// Create array
.serializeArray()
// Group array by key name
.reduce(function(grouped, field) {
grouped[field.name] = grouped[field.name] || [];
grouped[field.name].push(field.value);
return grouped;
}, {});
// Build query string
var queryString = $
.map(query, function(values, name) {
return name + '=' + values.join(delimiter);
})
.join('&');
// Build URL
var url = queryString ? staticUrl + '?' + queryString : staticUrl;
console.log(url);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="filter">
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
</form>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
