Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обработка radio buttons (https://javascript.ru/forum/events/81110-obrabotka-radio-buttons.html)

wrbanker 02.10.2020 11:27

Обработка radio buttons
 
Приветствую.
Стоит задача: показать выбранное значение radio. Работает только при выборе первого переключателя. В остальных случаях показывает, что переключатель не выбран. Помогите, плиз, понять где ошибка.

<form id="test-form">        
     <ul>
         <li><input type="radio" name="radio-button" value="one"></li>
         <li><input type="radio" name="radio-button" value="two"></li>
         <li><input type="radio" name="radio-button" value="three"></li>
     </ul>
     <input type="submit" value="Обработать">
</form>
             
    <script>
        const form = document.querySelector('#test-form');
        form.addEventListener('submit', function (event) {         
            const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.querySelector('[name="radio-button"]').value : 0;           
            alert (testValue);            
        });
    </script>

voraa 02.10.2020 12:04

const testValue = this.elements['radio-button'].value;

wrbanker 02.10.2020 12:12

Цитата:

Сообщение от voraa (Сообщение 529415)
const testValue = this.elements['radio-button'].value;

Спасибо! А почему вот этот код некорректно работает?

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;

voraa 02.10.2020 12:20

Цитата:

Сообщение от wrbanker
Спасибо! А почему вот этот код некорректно работает?

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;

Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.

wrbanker 02.10.2020 12:58

Цитата:

Сообщение от voraa (Сообщение 529420)
Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.

Да, про это я забыл. Спасибо. Работает только такой вариант:
const testValue = this.querySelector('[name="radio-button"]:checked').value


Тогда у меня ещё один вопрос. Можно ли обойтись без цикла, чтобы переменной присваивать значение radio, которое отмечено и '0' если не отмечено ничего? Через условное ветвление, например?

laimas 02.10.2020 13:10

Цитата:

Сообщение от wrbanker
Можно ли обойтись без цикла

А как вы думаете работает querySelector, знает что в третьем ряду слева нужное? Как бы не так, это обход циклом элементов формы, причем DOM, и это при том, что у this (формы) они уже доступны. Выведите в консоль this, изучите.

Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?

wrbanker 02.10.2020 13:27

Цитата:

Сообщение от laimas (Сообщение 529424)
Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?

Внутри формы есть несколько элементов input различных типов: number, date, radio, checkbox. При событии submit необходимо переменным присвоить определенные значения. В типах number и date - введенное значение или '0', если поле ввода не заполнено, в типе checkbox - '0' или'1', в типе radio - значение переключателя или '0', если ни один из переключателей не выбран.

laimas 02.10.2020 13:45

wrbanker, так задачи не описывают, это просто рассказ о нулях.

У вас форма, у нее поля, если нужно привести соответствие состояния неких переменных состоянию полей, значит простой обойти поля циклом и ... Но для этого нужно связать сами переменные с полями. В тоже время почему имена полей и их значения не могут сами служить таким набором?

wrbanker 02.10.2020 14:08

Ок, попробую описать задачу иначе. Есть страница с условной анкетой. После её заполнения пользователь нажимает кнопку и получает документ, который определён его ответами.
Я думаю, что перво-наперво необходимо отловить все его ответы и присвоить зависимые от ответов значения переменным. Далее, анализируя значения переменных, формировать документ.
Возможно, что я не прав.

laimas 02.10.2020 14:26

Вот это уже ближе к телу, а тут два сценария - если этот документ готовит сервер, то то что вы делаете на клиенте лишено смысла. Серверу нужно просто отправить форму, он должен анализировать что пришло. Если документ готовится на клиенте, то зачем посредник в виде 0 и ... Формируйте документ, в который вставляйте нужное, получая ответы из обхода циклом полей формы.


Часовой пояс GMT +3, время: 03:26.