не работает input radio
<form class="form-wrapper" id = "form1">
<div class="container">
<div class="title-form">
<h1>ОНЛАЙН-ПОДБОР АВТО</h1>
<p>Выберите необходимые для вас параметры, мы подберем для вас лучший вариант авто и доставим прямо до подъезда в любой город России</p>
</div>
<div class="form-body">
<div class="body-form-auto">
<div class="body-left">
<div class="fuel">
<h1>ТИП ТОПЛИВА</h1>
<div class="body-form-div">
<div>
<input type="radio" id="benz" name="fuel" value="Бензин"
checked>
<label for="benz">Бензин</label>
</div>
<div>
<input type="radio" id="diz" name="fuel" value="Дизель"
>
<label for="diz">Дизель</label>
</div>
<div>
<input type="radio" id="gibrid" name="fuel" value="Гибрид"
>
<label for="gibrid">Гибрид</label>
</div>
<div>
<input type="radio" id="electro" name="fuel" value="Электро"
>
<label for="electro">Электро</label>
</div>
</div>
</div>
<div class="budget">
<h1>ВАШ БЮДЖЕТ</h1>
<div class="body-form-div budget-form-div">
<div>
<input type="radio" id = "million" name="budget" value="1 млн₽" checked>
<label for="million">до 1 млн₽</label>
</div>
<div>
<input type="radio" id = "2million" name="budget" value="1 млн - 2 млн₽">
<label for="2million">1 млн - 2 млн₽</label>
</div>
<div>
<input type="radio" id = "3million" name="budget" value="3million">
<label for="3million">2 млн - 3 млн₽</label>
</div>
<div>
<input type="radio" id = "4million" name="budget" value="4million">
<label for="4million">3 млн - 5 млн₽</label>
</div>
<div>
<input type="radio" id = "5million" name="budget" value="5 млн₽+">
<label for="5million">5 млн₽+</label>
</div>
</div>
</div>
</div>
<div class="body-auto">
<div>
<img src="img/_src/img-form-auto/sedan.png" alt="">
<input type="radio" id="sedan" name="body-auto" value="Седан"
checked>
<label for="sedan">Седан</label>
</div>
<div>
<img src="img/_src/img-form-auto/hatcheback.png" alt="">
<input type="radio" id="hatcheback" name="body-auto" value="Хэтчбек"
>
<label for="hatcheback">Хэтчбек</label>
</div>
<div>
<img src="img/_src/img-form-auto/kupe.png" alt="">
<input type="radio" id="kupe" name="body-auto" value="Купе"
>
<label for="kupe">Купе</label>
</div>
<div>
<img src="img/_src/img-form-auto/cabriolet.png" alt="">
<input type="radio" id="cabriolet" name="body-auto" value="Кабриолет"
>
<label for="cabriolet">Кабриолет</label>
</div>
<div>
<img src="img/_src/img-form-auto/miniven.png" alt="">
<input type="radio" id="miniven" name="body-auto" value="Минивен"
>
<label for="miniven">Минивен</label>
</div>
<div>
<img src="img/_src/img-form-auto/crossover.png" alt="">
<input type="radio" id="crossover" name="body-auto" value="Кроссовер"
>
<label for="crossover">Кроссовер</label>
</div>
<div>
<img src="img/_src/img-form-auto/vnedorojnik.png" alt="">
<input type="radio" id="vnedorojnik" name="body-auto" value="Внедорожник"
>
<label for="vnedorojnik">Внедорожник</label>
</div>
<div>
<img src="img/_src/img-form-auto/picap.png" alt="">
<input type="radio" id="picap" name="body-auto" value="Пикап"
>
<label for="picap">Пикап</label>
</div>
</div>
</div>
<div class="form" method="POST">
<input type="text" class="input-form" name="name" id="name" placeholder="Ваше имя">
<input type="tel" class="input-form" name="phone" id="phone" placeholder="+7 (999) 999-99-99">
<button type="submit" class = "button form-button">ПОДОБРАТЬ АВТО</button>
</div>
</div>
</div>
</form>
Вот JS
document.getElementById('form1').addEventListener('submit', function(e) {
e.preventDefault();
let checked_fuel = document.querySelectorAll('input[name="fuel"]:checked');
let checked_budget = document.querySelectorAll('input[name="budget"]:checked');
let checked_body = document.querySelectorAll('input[name="body-auto"]:checked');
console.log(checked_fuel, checked_budget, checked_body)
let message = `<b>Заявка с сайта Онлайн подбор!</b>\n`;
message+=`<b>Имя: </b> ${this.name.value}\n`;
message+=`<b>Телефон: </b> ${this.phone.value}\n`;
message+=`<b>Тип топлива: </b> ${checked_fuel.value}\n`;
message+=`<b>Бюджет: </b> ${checked_budget.value}\n`;
message+=`<b>Вид авто: </b> ${checked_body.value}\n`;
let formData = new FormData(this);
for (var value of formData.values()) {
if(value.length ===0){
ev.preventDefault() // если нет полей - то остонавливаем выполнение события
}
}
axios.post(URI_API, {
chat_id:CHAT_ID,
parse_mode: 'html',
text: message
})
.then((res) => {
this.name.value = "";
this.phone.value = "";
success.innerHTML = "Сообщение отправлено!";
success.style.display = "block";
})
.catch((err) =>{
console.warn(err);
})
.finally(() => {
console.log('Конец')
})
})
При отправке данных формы у checked выдает undefind Проверял через инструментов разработчика, не меняется checked в input'ах
Источник: Stack Overflow на русском