Adding GET parameter on url with a tag

Question

I have a url that looks like this

mysite.com/index.php?page=home&gender=female&age=22

or

mysite.com/index.php?page=home&gender=female&occupation=programmer

How can I append a new parram orderby=value and order=asc using a tag like how the submit button works.

like when I click the link Name It will add new param on the link a I can sort the data by it

<a href="#">Name</a> | <a href="#">Age</a>

like how wordpresshandles it

wordpress/wp-admin/users.php?orderby=login&order=desc

Answer 1

Why don't you just build the URLs during the template render? No need for JS

eg

<a href="/index.php?occupation=programmer&orderby=name&order=desc">Name</a>

Just check the current order value when you render and invert it.

Obviously if you're using AJAX this is less useful.

Answer 2

You can use:

document.URL + "orderby=desc"

The only problem is that when you click again you get orderby twice. Therefore you should check if the url already contains the orderby parameter.

A more complex function to set or replace url parameters could be found here:

Add / Change parameter of URL and redirect to the new URL

Answer 3

use it

var url = document.URL;
if(url.indexOf('orderby') == -1){
url = document.URL + "orderby=desc";
}

Answer 4

You could use the function posted here https://stackoverflow.com/a/6021027/1021726. All credit goes to amateur.

The function either creates a new value on the query string or updates an existing value.

Add an onclick event on the <a> tag and call the function like

updateQueryStringParameter(window.url, "orderby", "myName");
updateQueryStringParameter(window.url, "order", "desc");