Navigate to new url with additional query when user clicks on a div

Question

I'm trying to accomplish the following: when a div is clicked the user will go to a new url and it adds a query string to the url.

For example the user is on this url:

www.example.com/step1/?query1=abc&query2=def

When a div is clicked the user should go to:

www.example.com/step2/?query1=abc&query2=def&query3=ghi

take reference from existing answer: https://stackoverflow.com/questions/22856635/how-do-i-make-a-div-link-open-in-a-new-tab-javascript-onclick-window-location — Sarvesh Mahajan, Dec 29 '19 at 08:45

score 0 · Answer 1 · answered Dec 29 '19 at 08:53

Let suppose you have a div (ie. <div id="mydiv" />), you can add a click eventListener which will be executed when you click the div, you can do it like:

let mydiv = document.getElementById('mydiv')

mydiv.addEventListener('click', () => {
  window.location.href = 'http://example.com/step2/?query1=abc&query2=def&query3=ghi'
})

I used vanilla Javascript, but if you are using jQuery it will be much easier

score 0 · Answer 2 · answered Dec 29 '19 at 08:54

May be this can help you. You can change the url with desired one

<!DOCTYPE html>
<html>
<body>

<script ype="application/javascript">
function myFunction() {
location.replace("https://stackoverflow.com/");
}
</script>

<div onclick="myFunction()">
<h2>test</h2>
</div>
</body>

score 0 · Answer 3 · answered Dec 29 '19 at 10:53

Try this:

function go(){
var currentUrl = window.location.href;
var targetUrl = 'http://example.com/?query3=value';
var newUrl = currentUrl + "&" + targetUrl.split("?")[1];
console.log(newUrl);
//window.location.href = newUrl;
}

<div onclick="go()">GO</div>

Navigate to new url with additional query when user clicks on a div

3 Answers3