Manage url parameter with multiple values from checkboxes in Ajax

Question

Thanks to @charlietfl I'm able to add/remove parameters to URL according to the checkboxes choices.

Now I want to have multiple values for a specific URL parameter if multiple checkboxes are checked.

I adapted this previous answer snippet to reflect where I'm stuck.

When selecting multiple checkboxes the parameter and value are added whereas I need to only add the value.

How can I get http://example.com/?param=foo,bar instead of http://example.com/?param=foo&param=bar when I Check foo and bar?

const url = 'http://example.com' // demo version
// const url = location.href - live version
const urlObj = new URL(url);
const params = urlObj.searchParams

const $checks = $(':checkbox')

// on page load check the ones that exist un url
params.forEach((val, key) => $checks.filter('[name="' + key + '"]').prop('checked', true));        

$checks.change(function(){
    // append when checkbox gets checked and delete when unchecked
    if(this.checked){
                //here I check if there is already the parameter in url
    if (url.indexOf(this.value) > -1) {
        //and try to append only this name with a comma as separator from previous one
        params.append(',',this.name )
    } else {
      params.append(this.value,this.name )
    }
    }else{
        params.delete(this.name);       
    }
    // do your page load with location.href = urlObj.href
     console.clear()
     console.log(urlObj.href);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Foo <input type="checkbox" name="foo" value="param"/></label> 
<label>Bar <input type="checkbox" name="bar" value="param"/></label>
<label>Zzz <input type="checkbox" name="zzz" value="param"/></label>

Reyno · Accepted Answer · 2020-08-27T11:33:42.860

URLSearchParams has a has method which you can use to check if a parameter is set.

Also the first part of the append method is the "key". Setting this to "," won't add onto the existing value. You need to get the existing value and append onto it. Then overwrite the old value with the new one.

As for your delete. You first need to get the current value. Then remove the part you unchecked. At last you can overwrite the current value or totally delete it.

Be aware then a comma gets turned into "%2C" which basically is the ASCII variant, more info on that here

const url = "http://example.com"; // demo version
// const url = location.href - live version
const urlObj = new URL(url);
const params = urlObj.searchParams;

const $checks = $(":checkbox");

const seperator = ",";

// on page load check the ones that exist un url
params.forEach((val, key) =>
  $checks.filter('[name="' + key + '"]').prop("checked", true)
);

$checks.change(function () {
  // append when checkbox gets checked and delete when unchecked
  if (this.checked) {
    //here I check if there is already the parameter in url
    if (params.has(this.value)) {
      // get saved value
      const current = params.get(this.value);
      // combine saved and new value
      const extra = current + seperator + this.name;
      // overwrite old value
      params.set(this.value, extra);
    } else {
      params.append(this.value, this.name);
    }
  } else {
    //  get saved value
    const current = params.get(this.value);
    // split them by ","
    const parts = current.split(seperator);
    // get index of item to remove
    const index = parts.indexOf(this.name);
    // remove item
    parts.splice(index, 1);
    
    if(parts.length === 0) {
      // if nothing is left delete the parameter
      params.delete(this.value);
    }else{
      // overwrite with the updated value
      params.set(this.value, parts.join(seperator));
    }
  }
  // do your page load with location.href = urlObj.href
  //console.clear()
  console.log(urlObj.href);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Foo <input type="checkbox" name="foo" value="param"/></label> 
<label>Bar <input type="checkbox" name="bar" value="param"/></label>
<label>Zzz <input type="checkbox" name="zzz" value="param"/></label>

Manage url parameter with multiple values from checkboxes in Ajax

1 Answers1