Running ajax query directly from url-CodePudding

I use the checkbox in a part where I check filters with ajax. As soon as I click on the Checkbox, all products are loaded on the same page. I am trying to suppress the data here via URL without pressing any checkbox here. Is there any way I can do this?

Checkbox Data Here

<input  type="checkbox" id="marka_34" value="35">
<label  for="marka_34">Data 1 </label>

<input  type="checkbox" id="marka_35" value="35">
<label  for="marka_35">Data 2 </label>          

<input  type="checkbox" id="marka_36" value="35">
<label  for="marka_36">Data 3</label>

<input  type="checkbox" id="marka_37" value="35">
<label  for="marka_37">Data 4</label>

This is the query I want to create.

https://example.com/kategori/gunes-urunleri?urun_marka=marka_36

If you want to check it live You can access the site by clicking here.

CodePudding user response：

Here on every change to some checkbox, the state is taken and transformed to search params string. You need to implement the fetchData method.

function getSelectedIds(){
  const ids = [];
  document
    .querySelectorAll('.custom-control-input.common_selector')
    .forEach(el => {
      if(el.checked){
        ids.push(el.id); 
      }
    })
  return ids;
}
function getUrl(){
  const ids = getSelectedIds();
  const url = new URL('https://example.com/kategori/gunes-urunleri');
  ids.map(id => {
    url.searchParams.append('urun_marka', id);
  });
  return url.toString();
}

function fetchData(){
  console.log('fetching data from:', getUrl());
}

document
  .querySelectorAll('.custom-control-input.common_selector')
  .forEach(el => {
    el.addEventListener('change', fetchData);
  })

<input  type="checkbox" id="marka_34" value="35">
<label  for="marka_34">Data 1 </label>

<input  type="checkbox" id="marka_35" value="35">
<label  for="marka_35">Data 2 </label>          

<input  type="checkbox" id="marka_36" value="35">
<label  for="marka_36">Data 3</label>

<input  type="checkbox" id="marka_37" value="35">
<label  for="marka_37">Data 4</label>