javascript - Running ajax query directly from url

View Original

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 class="custom-control-input common_selector marka" type="checkbox" id="marka_34" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_34">Data 1 </label>

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_35" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_35">Data 2 </label>          

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_36" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_36">Data 3</label>

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_37" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_37">Data 4</label>

Answer

Solution:

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 class="custom-control-input common_selector marka" type="checkbox" id="marka_34" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_34">Data 1 </label>

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_35" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_35">Data 2 </label>          

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_36" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_36">Data 3</label>

<input class="custom-control-input common_selector marka" type="checkbox" id="marka_37" value="35">
<label class="custom-control-label cz-filter-item-text" for="marka_37">Data 4</label>

Source