02.10.2020, 11:27
|
Аспирант
|
|
Регистрация: 05.08.2020
Сообщений: 38
|
|
Обработка 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>
|
|
02.10.2020, 12:04
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,748
|
|
const testValue = this.elements['radio-button'].value;
|
|
02.10.2020, 12:12
|
Аспирант
|
|
Регистрация: 05.08.2020
Сообщений: 38
|
|
Сообщение от voraa
|
const testValue = this.elements['radio-button'].value;
|
Спасибо! А почему вот этот код некорректно работает?
const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;
|
|
02.10.2020, 12:20
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,748
|
|
Сообщение от wrbanker
|
Спасибо! А почему вот этот код некорректно работает?
const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;
|
Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.
|
|
02.10.2020, 12:58
|
Аспирант
|
|
Регистрация: 05.08.2020
Сообщений: 38
|
|
Сообщение от voraa
|
Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.
|
Да, про это я забыл. Спасибо. Работает только такой вариант:
const testValue = this.querySelector('[name="radio-button"]:checked').value
Тогда у меня ещё один вопрос. Можно ли обойтись без цикла, чтобы переменной присваивать значение radio, которое отмечено и '0' если не отмечено ничего? Через условное ветвление, например?
Последний раз редактировалось wrbanker, 02.10.2020 в 12:59.
Причина: Дополнение
|
|
02.10.2020, 13:10
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от wrbanker
|
Можно ли обойтись без цикла
|
А как вы думаете работает querySelector, знает что в третьем ряду слева нужное? Как бы не так, это обход циклом элементов формы, причем DOM, и это при том, что у this (формы) они уже доступны. Выведите в консоль this, изучите.
Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?
|
|
02.10.2020, 13:27
|
Аспирант
|
|
Регистрация: 05.08.2020
Сообщений: 38
|
|
Сообщение от laimas
|
Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?
|
Внутри формы есть несколько элементов input различных типов: number, date, radio, checkbox. При событии submit необходимо переменным присвоить определенные значения. В типах number и date - введенное значение или '0', если поле ввода не заполнено, в типе checkbox - '0' или'1', в типе radio - значение переключателя или '0', если ни один из переключателей не выбран.
|
|
02.10.2020, 13:45
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
wrbanker, так задачи не описывают, это просто рассказ о нулях.
У вас форма, у нее поля, если нужно привести соответствие состояния неких переменных состоянию полей, значит простой обойти поля циклом и ... Но для этого нужно связать сами переменные с полями. В тоже время почему имена полей и их значения не могут сами служить таким набором?
|
|
02.10.2020, 14:08
|
Аспирант
|
|
Регистрация: 05.08.2020
Сообщений: 38
|
|
Ок, попробую описать задачу иначе. Есть страница с условной анкетой. После её заполнения пользователь нажимает кнопку и получает документ, который определён его ответами.
Я думаю, что перво-наперво необходимо отловить все его ответы и присвоить зависимые от ответов значения переменным. Далее, анализируя значения переменных, формировать документ.
Возможно, что я не прав.
|
|
02.10.2020, 14:26
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Вот это уже ближе к телу, а тут два сценария - если этот документ готовит сервер, то то что вы делаете на клиенте лишено смысла. Серверу нужно просто отправить форму, он должен анализировать что пришло. Если документ готовится на клиенте, то зачем посредник в виде 0 и ... Формируйте документ, в который вставляйте нужное, получая ответы из обхода циклом полей формы.
|
|
|
|