Jquery Add Multiple Filter Parameters To Url

I have multiple groups of checkboxes that are used to filter search results. For example, a search for shirts would have group one as colors, which includes things like, black, blu

Solution 1:

I think your problem is that you are always only getting only one key ( if exists if it doesn't exist then the code breaks because its undefined).

you should iterate over all the keys and in that way you are also safe if you got no keys - fdata will remain empty.

<scripttype="text/javascript">functionGetFilters() {
      $('input[type="checkbox"]').on('change', function (e) {
          var data = {},
              fdata = [],
              loc = $('<a>', { href: window.location })[0];
          $('input[type="checkbox"]').each(function (i) {
              if (this.checked) {
                  if (!data.hasOwnProperty(this.name)) {
                      data[this.name] = [];
                  }
                  data[this.name].push(this.value);
              }
          });
          // get all keys.var keys = Object.keys(data);
          var fdata = "";
          // iterate over them and create the fdata
          keys.forEach(function(key,i){
              if (i>0) fdata += '&'; // if its not the first key add &
              fdata += key+"="+data[key].join(',');
          });
          $.ajax({
            type: "POST",
            url: "/ajax/get",
            data: {
                  "_token": "{{ csrf_token() }}",
                  "fdata": fdata
                },
            success: function (response) {
              $('#d2d-results').html(response);
            }
          });
          if (history.pushState) {
              history.pushState(null, null, loc.pathname + '?' + fdata);
          }
      });
  }
  window.onload = GetFilters;