Menu
I have a form with a get method that is used for searching items (vehicles) from the database. The form has multiple checkbox sets. Like user can filter the search results by selecting multiple makes from the makes checkbox list. Similarly user can also apply filter on car models from models chebox list and so on. There are about 10 such filters on the form.
Here is the code snippet of the my form:
<form action='./search' method='get'>
<input type='checkbox' name='make[]' value='BMW'/>
<input type='checkbox' name='make[]' value='Mercedes'/>
<input type='checkbox' name='make[]' value='Honda'/>
<input type='checkbox' name='make[]' value='Toyota'/>
<input type='checkbox' name='make[]' value='Porsche'/>
......//Remaining Form
</form>
Similarly for car models I have similar markup...There are such 10 filters all implemented using checkbox list.
Now coming towards the problem, when I submit the form I get URL like this:
http://localhost/auto/search?make=BMW&make=Mercedes&make=Honda
This is forming a type of query string which I don't like i.e it is repeating 'make' attribute for all the checked values and will do so for remaining 9 filters as well. This will result in very long ugly looking URL.
What I want is that my URL should look something like this:
http://localhost/auto/search?make=BMW,Mercedes,Honda
This is much better but I don't know how would I achieve that. What I have tried is to get all the values of checked boxes and then write them into hidden field value so that I get my desired format in the query string. And unset all the checboxes selected by the user and submit the form with hidden field containing all the selections. But the problem is when the form is submitted I get two 'make' fields in the URL like:
http://localhost/auto/search?make=&car_makes=BMW,Mercedes,Honda
where car_makes is the hidden input field in which I wrote all the selections in value attribute.
Any solution to this? So that make attribute does not get submitted, but it does, since it is the part of the form.
Thanks.
657
Try these:
<html>
<head>
<script type="text/javascript">
function buildup(){
var makes=document.getElementsByName('make[]');
var m=document.getElementById('make');
m.value='';
ms='';
for (var i = makes.length - 1; i >= 0; i--) {
if(i>0)ms=ms+',';
ms=ms+makes[i].value;
}
m.value=ms;
document.getElementById('form').submit();
}
</script>
</head>
<body>
<input type='checkbox' name='make[]' value='BMW'/>
<input type='checkbox' name='make[]' value='Mercedes'/>
<input type='checkbox' name='make[]' value='Honda'/>
<input type='checkbox' name='make[]' value='Toyota'/>
<input type='checkbox' name='make[]' value='Porsche'/>
<form action='./search' id='form' method='get'>
<input type='hidden' name='make' id='make'>
<input type='button' value='submit' onclick='buildup()'>
</form>
</body>
answered Sep 04 '25 19:09
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