не работает input radio

Рейтинг: 0Ответов: 0Опубликовано: 30.06.2023
<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'ах

Ответы

Ответов пока нет.