Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
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'));
}
Ce que je veux
Je veux recupérer dans un tableau les ID des checkbox qui sont checked au lieu de sa j'obtien NULL