Add paramters to URL with click functions

Question

I want to add parameters to the actual url depending on the selected values. The values will be set with a click function and should work independently from each other.

I've set global variables to store the click function values, but they don't get stored. How can I store the values correctely to work with them in my "URLSearchParams" string?

This is the Fiddle.

 var btn0;    
 var btn1;
      
      $('.btn0').click(function () {
    if ($(this).attr('data-selected') === 'true') {
      $(this).attr('data-selected', 'false');
      $(this).removeClass('selected');

    } else {
      $(this).closest('tr').find('.btn0').not(this)
        .removeClass('selected').attr('data-selected', 'false');
      $(this).attr('data-selected', 'true');
      $(this).addClass('selected');
      var btn0 = $(this).data("value");
    }
  });
  
      $('.btn1').click(function () {
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');

        } else {
            $(this).closest('tr').find('.btn1').not(this)
            .removeClass('selected').attr('data-selected', 'false');
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
            var btn1 = $(this).data("value");
        }
    });
    
const params = new URLSearchParams({
  var0: btn0,
  var1: btn1
});   
console.log(params.toString());

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty
– Twisty, Commented Jun 21, 2022 at 14:27

Twisty · Accepted Answer · 2022-06-21 15:19:13Z

1

Consider the following: https://jsfiddle.net/Twisty/ckd1j6u0/

HTML

<table class="container">
  <tbody>
    <tr class="tier0">
      <td class="talent-cell">
        <div class="btn btn0" data-value="a">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="b">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="c">Test2</div>
      </td>
    </tr>
    <tr class="tier1">
      <td class="talent-cell">
        <div class="btn btn1" data-value="d">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="e">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="f">Test2</div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {
  var selected = {
    var0: null,
    var1: null
  };
  $('.btn').click(function(event) {
    var row = $(this).closest("tr");
    $(".selected", row).removeClass("selected");
    $(this).addClass("selected");
    if ($(".selected").length == 2) {
      $("tr").each(function(i, el) {
        selected['var' + i] = $(".selected", el).attr("data-value");
      });
      var params = new URLSearchParams(selected);
      console.log(params.toString());
    }
  });
});

This uses just selected class instead of trying to also manage data-selected attributes. The code first makes sure only one button in each row is selected. It then populates an Object. When two selections have been made, it then creates the parameters for URL.

answered Jun 21, 2022 at 15:19

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keroster Over a year ago

Thanks. If you just click a selection from the first row it doesn't appear. You need to make a selection in the second row to get the result from the first row, too. Otherwise this would be perfect.

Twisty Over a year ago

@Keroster you can remove the condition, if ($(".selected").length == 2) {. This will allow the potential for null entry in one of the variables.

Michael Fritzsche · Accepted Answer · 2022-06-21 14:55:41Z

The params object does not reference to variables, but is initialized with empty btn0 and btn1. Re declaring btn0 and btn1 inside the click assignments makes no sense, because these will be new variables. You have to use the set function to manipulate key value pairs in params.

Here is a working example:

 var btn0;    
 var btn1;
      
      $('.btn0').click(function () {
    if ($(this).attr('data-selected') === 'true') {
      $(this).attr('data-selected', 'false');
      $(this).removeClass('selected');

    } else {
      $(this).closest('tr').find('.btn0').not(this)
        .removeClass('selected').attr('data-selected', 'false');
      $(this).attr('data-selected', 'true');
      $(this).addClass('selected');
      params.set('var0', $(this).data("value"));
      console.log(params.toString());
    }
  });
  
      $('.btn1').click(function () {
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');

        } else {
            $(this).closest('tr').find('.btn1').not(this)
            .removeClass('selected').attr('data-selected', 'false');
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
            params.set('var1', $(this).data("value"));
            console.log(params.toString());
        }
    });
    
const params = new URLSearchParams({
  var0: btn0,
  var1: btn1
});   
console.log(params.toString());

Collectives™ on Stack Overflow

Add paramters to URL with click functions

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related