Question 160473 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can a <a> tag set/update a query string value w/o appending it?

I am trying to update or set a given URL specific query string value on a click of an <a> element.

I managed to make it work by setting the URL:

<a id="my-link" href="http://example.com/">

$('#my-link').on('click', function(e) {
    let url = this.getAttribute('href');
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent(someDataObject);
    let url += `?${key}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = url; 
});

But this only works on the first click because it keeps appending the query string.

What I tried was to then save the original URL, set the url using e.originalEvent.currentTarget.href and then set it back after the click, but it doesn’t work, it just reads the original url instead of the updated one:

<a id="my-link" href="http://example.com/">

$('#my-link').on('click', function(e) {
    let originalUrl = this.getAttribute('href');
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent(someDataObject);
    let updatedUrl += originalUrl + `?${key}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = updatedUrl; 
    this.href = originalUrl; // it then opens this URL instead of the updatedUrl
});
Tags:

3

Answers


  1. 0

    Use the URL API

    Note: use new URL(this.href); if you do not have a valid URL since
    new URL(this.getAttribute("href")) will fail on href="/"

    $('#my-link').on('click', function(e) {
  e.preventDefault(); // to see the console
  let queryStringKey = 'someKey';
  let queryStringValue = { x: 2 };
  let url = new URL(this.href); 
  url.searchParams.set(queryStringKey, queryStringValue);
  this.href=url.toString();
  console.log(this.href)
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="my-link" href="/">Click</a>
    Login or Signup to reply.
  2. 0

    Whenever the url get clicked Remove the additional key value to restore the original link :

    // A $( document ).ready() block.
$( document ).ready(function() {
    
    let someDataObject = 'someDataObject';
    $('#my-link').on('click', function(e) {
      e.preventDefault(); // to see the console
      let url = this.getAttribute('href');
     
      let queryStringKey = 'someKey';
      let queryStringValue = encodeURIComponent(someDataObject);

      url = url.split('?'+queryStringKey)[0];
  
      url += `?${queryStringKey}=${queryStringValue}`;
      
      console.log(url);
      e.originalEvent.currentTarget.href = url; 
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="my-link" href="http://example.com/">click me</a>
    Login or Signup to reply.
  3. 0

    I would do so:

    $('#my-link').on('click', function(e) {
    let url = this.getAttribute('href').split('?')[0]; // remove old query string
    let queryStringKey = 'someKey';
    let queryStringValue = encodeURIComponent('someValue');
    url += `?${queryStringKey}=${queryStringValue}`;
    e.originalEvent.currentTarget.href = url; 
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search