Написал код, который при изменении состояния какого-либо инпута в форме, собирает значения всех отмеченых чекбоксов и значение из цифровых полей и посылает в формате json на сервер, ожидая ответа с данными о продуктах.
Чекбоксы выводятся динамически, на основе данных из базы и имеет следующий вид:
<input id="ch" type="checkbox" name="country" class="country" value="1">
...
<input id="2" type="checkbox" name="category" class="category" value="2">
js-кодfunction send_request(csrf_token, json) {
console.log('sdsd')
let xhr = new XMLHttpRequest();
xhr.open("POST", '/submit')
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.setRequestHeader('X-CSRFToken', csrf_token);
xhr.send(json);
let body = document.getElementById('product-set')
xhr.onload = () => body.innerHTML = xhr.response
}
function get_data(csrf_token) {
var countries = [];
var categories = [];
document.getElementById('params').addEventListener('change', function(event){
countries = []
categories = []
var countries_checkboxes = document.querySelectorAll('input[name=country]:checked')
for (var i = 0; i < countries_checkboxes.length; i++) {
countries.push(countries_checkboxes[i].value)
}
var categories_checboxes = document.querySelectorAll('input[name=category]:checked')
for (var j = 0; j < categories_checboxes.length; j++) {
categories.push(categories_checboxes[j].value)
}
var min_value = document.getElementById('min-price').value
var max_value = document.getElementById('max-price').value
var json = JSON.stringify({
countries: countries,
categories: categories,
min_value:min_value,
max_value:max_value,
});
console.log(json)
send_request(csrf_token,json)
});
}
Код работает, вроде даже правильно, вопрос в том, насколько правильно он написан и есть ли более хорошие практики?