Update current URL with extra parameters

Question

I have a products page which displays 10 products on each page.

The GET variable &perpage=10 changes the amount of results. I've made a <select> dropdown to choose different amounts of results.

Whenever this selection box is changed, &perpage=NEWVALUE should be added to the current URL.

How can I achieve this?

newfurniturey · Accepted Answer · 2012-08-27T17:27:49.730

2

The only ways to modify the current URL is with hashtags (#) and window.history.replaceState, both of which don't actually reload the page. These methods do dispatch change-events that you could listen-for and, using ajax, re-query a backend script to get results, however - this may be a bit more than what you actually need.

What you'll want to do, most likely, is have your form (with the select-menu) re-submit the form back to the current page. Something like:

<form action="" method="GET">
    <select name="perpage" onchange="this.form.submit()">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
    </select>
</form>

edited Aug 27 '12 at 17:27

answered Aug 27 '12 at 16:54

newfurniturey

37,556
9
94
102

1

Slight correction on this - cross-browser you are correct - but you *can* modify the URL without a refresh or a #hashtag in Webkit browsers by using `window.history.replaceState`. It is a contested feature though so only a minute grumble :) Perfectly correct other than that. – Pebbl Aug 27 '12 at 17:01
@pebbl, correct - but it's also the same as using a `#` in the regards that it doesn't actually re-query the page; it only replaces the browser's history of the current page. Navigating "back" to it will work, but not during the current instance. – newfurniturey Aug 27 '12 at 17:14
yep, I know, it was just because you stated *'the only way'* that my critique voice kicked in... what you state is utterly correct. – Pebbl Aug 27 '12 at 17:20
@pebbl You win this round, and again are correct =P; I've updated my wording to include `window.history.replaceState` as well =] ..Thanks for the tip! – newfurniturey Aug 27 '12 at 17:29

score 0 · Answer 2 · answered Aug 27 '12 at 16:53

Well, just location.href += "&perpage="+newvalue (with appropriately-defined newvalue from the <select> value) would work, but after a while you'll get something like

http://example.com/products.php?perpage=10&perpage=20&perpage=50&perpage=10&perpage=5&perpage=20&................

So you really should do something more like:

location.href = location.href.replace(/([?&])perpage=\d+/,"$1perpage="+newvalue);

score 0 · Answer 3 · edited Aug 27 '12 at 23:19

0

window.location.href="?perpage=NEWVALUE"

This will append the query string to the current location and the window will navigate to it

edited Aug 27 '12 at 23:19

Zoltan Toth

46,981
12
120
134

answered Aug 27 '12 at 16:53

jw56578

400
1
13

score 0 · Answer 4 · edited Aug 27 '12 at 23:20

0

In PHP, JavaScript?

<form method="get">
    <select name="perpage">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>

Using the GET method will post the perpage value to your url, and it will reload your page (set your action="someurl" if you want it to go to another page).

edited Aug 27 '12 at 23:20

Zoltan Toth

46,981
12
120
134

answered Aug 27 '12 at 16:54

sonjz

4,870
3
42
60

score 0 · Answer 5 · edited May 23 '17 at 10:24

0

You can't modify a URL like you describe without reloading the page. (Assuming you don't want to reload the page)

See jquery: change the URL address without redirecting? for a more complete explanation, and how to do some something similar with a hash.

edited May 23 '17 at 10:24

Community

1
1

answered Aug 27 '12 at 16:54

dersam

106
1
4

Ross Smith II · Answer 6 · 2012-08-28T00:33:18.520

Assuming you're asking how to do this on the server side (your question doesn't state), here's one way to do what you want:

$parts = parse_url($url); # parse the URL into its component parts
if (isset($parts['query'])) {
    parse_str($parts['query'], $qs); # split query string into parts
} else {
    $qs = array();
}
$qs['perpage'] = $NEWVALUE; # add param to array
$parts['query'] = http_build_query($qs); # build query string from array

# then, using `unparse_url()` from 
# http://www.php.net/manual/en/function.parse-url.php#106731
# you rebuild the URL:

$url = unparse_url($parts);

# For reference, here's `unparse_url()`:

function unparse_url($parsed_url) { 
  $scheme   = isset($parsed_url['scheme']) ? $parsed_url['scheme'] . '://' : '';
  $host     = isset($parsed_url['host']) ? $parsed_url['host'] : ''; 
  $port     = isset($parsed_url['port']) ? ':' . $parsed_url['port'] : ''; 
  $user     = isset($parsed_url['user']) ? $parsed_url['user'] : ''; 
  $pass     = isset($parsed_url['pass']) ? ':' . $parsed_url['pass']  : ''; 
  $pass     = ($user || $pass) ? "$pass@" : ''; 
  $path     = isset($parsed_url['path']) ? $parsed_url['path'] : ''; 
  $query    = isset($parsed_url['query']) ? '?' . $parsed_url['query'] : ''; 
  $fragment = isset($parsed_url['fragment']) ? '#' . $parsed_url['fragment'] : '';
   return "$scheme$user$pass$host$port$path$query$fragment"; 
}

See http://www.php.net/manual/en/function.parse-url.php#106731

It looks to me like you've answered a different question to what the OP was asking. The server-side part is already functioning, it's the front-end posting/getting of the value they are having difficulties with. — Pebbl, Aug 27 '12 at 17:06

Update current URL with extra parameters

6 Answers6