Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2020, 12:27
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Обработка 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2020, 13:04
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 692

const testValue = this.elements['radio-button'].value;
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2020, 13:12
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Сообщение от voraa Посмотреть сообщение
const testValue = this.elements['radio-button'].value;
Спасибо! А почему вот этот код некорректно работает?

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2020, 13:20
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 692

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

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;
Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.
Ответить с цитированием
  #5 (permalink)  
Старый 02.10.2020, 13:58
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Сообщение от voraa Посмотреть сообщение
Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.
Да, про это я забыл. Спасибо. Работает только такой вариант:
const testValue = this.querySelector('[name="radio-button"]:checked').value


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

Последний раз редактировалось wrbanker, 02.10.2020 в 13:59. Причина: Дополнение
Ответить с цитированием
  #6 (permalink)  
Старый 02.10.2020, 14:10
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,831

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

Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?
Ответить с цитированием
  #7 (permalink)  
Старый 02.10.2020, 14:27
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Сообщение от laimas Посмотреть сообщение
Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?
Внутри формы есть несколько элементов input различных типов: number, date, radio, checkbox. При событии submit необходимо переменным присвоить определенные значения. В типах number и date - введенное значение или '0', если поле ввода не заполнено, в типе checkbox - '0' или'1', в типе radio - значение переключателя или '0', если ни один из переключателей не выбран.
Ответить с цитированием
  #8 (permalink)  
Старый 02.10.2020, 14:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,831

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

У вас форма, у нее поля, если нужно привести соответствие состояния неких переменных состоянию полей, значит простой обойти поля циклом и ... Но для этого нужно связать сами переменные с полями. В тоже время почему имена полей и их значения не могут сами служить таким набором?
Ответить с цитированием
  #9 (permalink)  
Старый 02.10.2020, 15:08
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Ок, попробую описать задачу иначе. Есть страница с условной анкетой. После её заполнения пользователь нажимает кнопку и получает документ, который определён его ответами.
Я думаю, что перво-наперво необходимо отловить все его ответы и присвоить зависимые от ответов значения переменным. Далее, анализируя значения переменных, формировать документ.
Возможно, что я не прав.
Ответить с цитированием
  #10 (permalink)  
Старый 02.10.2020, 15:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,831

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка radio и выполнение финкции serg_eliseev Events/DOM/Window 7 07.03.2016 01:51
Зависимые radio buttons seahunter jQuery 3 13.01.2016 10:42
Зависимые radio buttons seahunter Сайт Javascript.ru 3 12.01.2016 14:48
Обработка radio button imengine Общие вопросы Javascript 2 15.01.2014 17:21
radio buttons ams jQuery 1 24.03.2011 23:50