Dinamically changing some Queries Values inside an Href Attribute after clicking on specific elements. Using Jquery

I need to dynamically and simultaneously change more than one Query Value in a Href attribute (please see the a tag with class="button").

When i click on specific elements (please see the a class="tab-bagno" and class="tab-soggiorno") I want to retrieve their data-name and use that value inside the a tag with class="button".

As you can see, the a tag with class="button" has two specific queries with non-assigned values (&soggiorno=INSERT-SOGGIORNO and &bagno=INSERT-BAGNO), my goal is to be able to put the data-name of the a tag with class="button" inside the two queries.

For now, I was able to correctly retrieve the data-name values, but i can't dynamically insert them inside the href.

here you can see my code:

$( document ).ready(function(){
        var nameSoggiorno1 = $('.tab-soggiorno').on('click',function(valueSoggiorno){
            //console.log(valueSoggiorno['currentTarget']);
            var nameSoggiorno = $(valueSoggiorno['currentTarget']).data('name') 
            console.log(nameSoggiorno);
        });


        var nameBagno1 = $('.tab-bagno').on('click',function(valueBagno){
            //console.log(valueBagno['currentTarget']);
            var nameBagno = $(valueBagno['currentTarget']).data('name'); 
            console.log(nameBagno);  
        });



        $('.button').each(function(){
                var currenthref = $(this).attr("href");
                if(currenthref.includes('&soggiorno=')){
                    var ti=currenthref.indexOf('&soggiorno=');
                    var ti2=currenthref.indexOf('&bagno=');
                    currenthref1 = currenthref.substring(0, ti);
                    currenthref2 = currenthref1.substring(ti, 100000);

                }
                 $(this).attr("href", currenthref1 + "&soggiorno=" + nameSoggiorno1 + "&bagno=" + nameBagno1);
                })
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a data-name="Ceramica Mirage - jewels, colore 16" class="tab-bagno">1</a>
  <a data-name="Ceramica Mirage - jewels, colore 14" class="tab-bagno">2</a>
  <a data-name="Ceramica Mirage - jewels, colore 6" class="tab-bagno">3</a>
</div>
                  
                  
<div>
  <a data-name="Parquet Castiglioni - Verniciato 05" class="tab-soggiorno">4</a>
  <a data-name="Parquet Castiglioni - Verniciato Naturale" class="tab-soggiorno">5</a>
  <a data-name="Parquet Castiglioni - Verniciato 09" class="tab-soggiorno">6</a>
</div>


<a class="button" href="checkout.php?&allestimento=Silver&soggiorno=INSERT-SOGGIORNO&bagno=INSERT-BAGNO" >select</a>

when I put this code online, the href return this: checkout.php?tipo=43&stile=Elegance&allestimento=Gold&soggiorno=[object Object]&bagno=[object Object]"

Thank you for your help.

Solution

There are a number of faults in your code...

nameSoggiorno1 and nameBagno1 are the jQuery objects that are returned from the binding of the click events... that is why you're seeing the [object object] text being used.

I think you mean to use the nameSoggiorno and nameBagno variables... but you've put them as a var within the event handlers.

You are also setting the href attribute on the .button when the page loads, which means that the nameSoggiorno and nameBagno wouldn't have been ready anyway... so you need to set the href against the link when the selection is made.

And finally, you need to url-encode the query string data before appending it to the link.

Try the following, where I have moved the var outside of the event handlers, and changed the href attribute assignment accordingly. I have also removed the nameSoggiorno1 and nameBagno1 assignments as they are pointless in this context.

$(function(){
  var nameSoggiorno = encodeURIComponent($(".tab-soggiorno-default").data("name"));
  var nameBagno = encodeURIComponent($(".tab-bagno-default").data("name"));
  buildUrl();
        
  $('.tab-soggiorno').on('click',function(e){
    nameSoggiorno = $(this).data('name') 
    nameSoggiorno = encodeURIComponent(nameSoggiorno);
    console.log(nameSoggiorno);
    buildUrl();
  });

  $('.tab-bagno').on('click',function(e){
    nameBagno = $(this).data('name'); 
    nameBagno = encodeURIComponent(nameBagno);
    console.log(nameBagno);  
    buildUrl();
  });

  function buildUrl(){
    $(".button").each(function(){
      var currenthref = $(this).attr("href");
      if(currenthref.includes('&soggiorno=')){
        var ti = currenthref.indexOf('&soggiorno=');
        currenthref = currenthref.substring(0, ti);
      }
      $(this).attr("href", currenthref + "&soggiorno=" + nameSoggiorno + "&bagno=" + nameBagno);
      console.log($(this).attr("href"));
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a data-name="Ceramica Mirage - jewels, colore 16" class="tab-bagno tab-bagno-default">1</a>
  <a data-name="Ceramica Mirage - jewels, colore 14" class="tab-bagno">2</a>
  <a data-name="Ceramica Mirage - jewels, colore 6" class="tab-bagno">3</a>
</div>
                  
                  
<div>
  <a data-name="Parquet Castiglioni - Verniciato 05" class="tab-soggiorno tab-soggiorno-default">4</a>
  <a data-name="Parquet Castiglioni - Verniciato Naturale" class="tab-soggiorno">5</a>
  <a data-name="Parquet Castiglioni - Verniciato 09" class="tab-soggiorno">6</a>
</div>


<a class="button" href="checkout.php?&allestimento=Silver&soggiorno=INSERT-SOGGIORNO&bagno=INSERT-BAGNO" >select</a>

Update

In response to the OP's comment, you could default the initial values by adding a new class to the specific items, and using that to set the value. Remembering to call the buildUrl() function afterwards.

I have updated the above code to reflect this.