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.

• Dinesh Patra: on clicking the div do you wnat to reload the page with the new url?
• Esraa_92: On clicking the div I want tho add the new parameter to the actual url, without reload the page.
• Dinesh Patra: then you need to strore the url in a variable. You can not show it in url.

Answer 1

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.

• Ionut Milas: Just tested that method on stackoferflow page and it works. Type the method in console and see the result
• Ionut Milas: Please mark the answer if it's the correct one :) Thanks
• Esraa_92: Yes, your answer works correctly, thank's for your help.

Answer 2

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

• Esraa_92: Thank's for your answer, but is too long code, I get the solution in one line ;-D

Answer 3

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 :-).

Answer 4

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");

• Esraa_92: I don't want to reload the page.

Answer 5

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); 
});

• Esraa_92: Thank you for your answer, but you add the url to a <p>, I need to add this to URL without reload the page.
• ercaguysal: I don't understand you. Did you mean Ajax ? Something like this : stackoverflow.com/questions/18490026/…