How to change url based on input type selected using javaScript/Jquery?

Question

I have a form

 <form name="categoryform" method="post">
 Category:<select name="category" id="category" >
 <option value="games">games</option>
 <option value="books">books</option>
 <option value="toys">toys</option>
 <option value="clothes">clothes</option>
 </select>

 Age: <select  multiple name="age" id="age" >
 <option value="5">5</option>
 <option value="10">10</option>
 <option value="15">15</option>
 </select>
 <input type="submit" name="submit" value="submit"/>
 </form>

Initially the url is http://localhost/childzone/

If I select the option books from Category the URL must change to http://localhost/childzone/books and when I select option clothes the url must be http://localhost/childzone/clothes.

If I also select age=5 from the dropdown age the url must be http://localhost/childzone/clothes&age=5. For multiple options selected i.e, if I select 5 and 10 both from age the url must be http://localhost/childzone/clothes&age=5,10.

How do I get such a URL. I am new to php, can anyone help. Thank you in advance

Answer 1

//on books select event use
location.replace("http://localhost/childzone/books");

//on clothes select event use
location.replace("http://localhost/childzone/clothes");

without refreshing :-

 //on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")

//on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")