How can I add a parameter to my url, without reload the page?

Question

I have this url http://localhost:1234/pag1

I want to be like below when I click on the div:

 http://localhost:1234/pag1?fare=standar

and I have an onclick event function:

 <div id="" onclick="addUrl();"> </div>

And the js code:

<script type="text/javascript">
 function addUrl() {
    var url = window.location.href;
    window.location.hash = '?fare=standar';
};
    </script>

This give me this result:

http://localhost:1234/pag1#?fare=standar

And I don't Know how to remove the (#). I only need to add the parameter to the url, without refresh the page.

Suggest me! Thank's.

on clicking the div do you wnat to reload the page with the new url? — Dinesh Patra, Nov 20 '15 at 09:44
On clicking the div I want tho add the new parameter to the actual url, without reload the page. — Esraa_92, Nov 20 '15 at 09:45
then you need to strore the url in a variable. You can not show it in url. — Dinesh Patra, Nov 20 '15 at 09:48

score 14 · Accepted Answer · answered Nov 20 '15 at 09:52

14

Use window.history.pushState( {} , '', '?fare=standar' );

This should update the url without refresh.

You can also do a bit of reseach on pushState as the implementation can differ.

answered Nov 20 '15 at 09:52

Ionut Milas

318
1
11

1

Just tested that method on stackoferflow page and it works. Type the method in console and see the result – Ionut Milas Nov 20 '15 at 09:53
2

Please mark the answer if it's the correct one :) Thanks – Ionut Milas Nov 20 '15 at 10:00
1

Yes, your answer works correctly, thank's for your help. – Esraa_92 Nov 20 '15 at 10:03

score 1 · Answer 2 · answered Nov 20 '15 at 09:54

window.location.hash always put "#" in url

you can use to push paramter in url by using this function

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    window.location.href = url;
}

i hope this will helpful to you

Thank's for your answer, but is too long code, I get the solution in one line ;-D — Esraa_92, Nov 20 '15 at 10:12

score 1 · Answer 3 · answered Apr 05 '20 at 17:00

Try this

HTML

<div onclick="addUrl()"> </div>

Javascript

  <script type="text/javascript">
    function addUrl() {
    var url = window.history.pushState( {} , '', '?fare=standar' );
  </script>

Quick Explanation : When user clicks on div, URL will update without refreshing the page.

Hope this will work for you, thank you :-).

Shameem Ahmed Mulla · Answer 4 · 2018-10-12T07:15:13.263

-2

Try this

var myURL = document.location;
document.location = myURL + "?a=parameter";

Or

location.hash = 'a=parameter'

Or without reloading the page

window.history.pushState("object or string", "Title", "new url");

Or without reloading the page

window.history.replaceState(null, null, "/another-new-url");

edited Oct 12 '18 at 07:15

answered Nov 20 '15 at 09:50

Shameem Ahmed Mulla

656
4
13

1

I don't want to reload the page. – Esraa_92 Nov 20 '15 at 09:52

score -3 · Answer 5 · edited Nov 20 '15 at 11:27

-3

Why dont you use jQuery? I prepared sample like here in JsFiddle:

$("#clickableDiv").click(function(){
  var url = "http://localhost:1234/pag1";
  var parameter = "fare=standar";
  $("#AppendUrl").text(url+ "?" + parameter);  
});

edited Nov 20 '15 at 11:27

Bartłomiej Semańczyk

59,234
49
233
358

answered Nov 20 '15 at 09:51

ercaguysal

1
3

Thank you for your answer, but you add the url to a
, I need to add this to URL without reload the page.
– Esraa_92 Nov 20 '15 at 09:55
I don't understand you. Did you mean Ajax ? Something like this : http://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax – ercaguysal Nov 24 '15 at 15:02

How can I add a parameter to my url, without reload the page?

5 Answers5