Bonjour,
Voila je rencontre un petit problème avec mon code.
Je cherche mettre en place un système de filtre de produit par categorie
Mon code JS
let categories = []
items = document.querySelectorAll('input[name="categories[]"]')
items.forEach(item => {
item.addEventListener('change', function (e) {
e.preventDefault()
categories = []
let checkedItems = document.querySelectorAll('input[name="categories[]"]:checked')
checkedItems.forEach(itemCheck => {
categories.push(itemCheck.value);
})
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(categories)
}
}
}
xhr.open('GET', '/shop/filter', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(categories)
})
})
Code HTML
<div class="checkbox-filter">
@foreach($categories as $category)
<div class="input-checkbox">
<input type="checkbox" id="{{ $category->slug }}" value="{{ $category->id }}" name="categories[]">
<label for="{{ $category->slug }}">
<span></span>
{{ $category->name }}
</label>
</div>
@endforeach
</div>
Dans Mon Controller
public function filter()
{
var_dump(\request()->all());
//$products = \Product::whereIn('category_id', $categories)->get();
//return view('products.index', compact('products'));
}
Je veux recupérer dans un tableau les ID des checkbox qui sont checked au lieu de sa j'obtien NULL