jQuery не может получить значение от Radio button
Доброго времени суток! При написании программы с использованием js столкнулся со следующей проблемой: не могу передать значение от radio button в память localStorage при помощи jQuery. Все остальные элементы (13 штук) были успешно переданы, но только type="radio" не передается. Даже selected через option передалось, но мне нужно использовать именно radio. Бьюсь над проблемой уже часов 5, гугл не особо помогает. Собственно код.
Участок кода с radio кнопками <div class="field"> <p class="title1 noma"> <b>Ваш пол:</b></p> <input type="radio" class="inpdata noma rad" name="browser" id="gender" value="man" required> Мужской <input type="radio" name="browser" value="woman"> Женский<br> </div> Последний мой вариант передачи значения с радио кнопок(первоначально пытался использовать аналогию с текстовым полем, но не получалось)
var gender = $('input:radio[name=browser]:checked').val();
gender.value = localStorage.getItem("browser");
genderinp = localStorage.getItem("genderinp");
gender.oninput = function()
{
localStorage.setItem('genderinp',gender.value);
}
genderinp = localStorage.getItem("genderinp");
console.log("Пол - " + genderinp);
Вот рабочий вариант передачи значения из текстового поля <div class="field"> <p class="title1"> <b>Ваше отчество:</b></p> <input type="text" class="inpdata" id="mname" required></input> </div>
var sname = document.getElementById("sname");
sname.value = localStorage.getItem("sname");
snameinp = localStorage.getItem("snameinp");
sname.oninput = function()
{
localStorage.setItem('snameinp',sname.value);
}
snameinp = localStorage.getItem("snameinp");
console.log("Фамилия - " + snameinp);
Может немного намудрил, но я только начал изучать JS и оно работает в принципе)) за исключением radio. Буду очень признателен если мы решим это проблему) |
<div class="field">
<p class="title1 noma">
<b>Ваш пол:</b></p>
<label><input type="radio" class="inpdata noma rad" name="browser" id="gender" value="man" required> Мужской</label>
<label><input type="radio" name="browser" value="woman"> Женский<br></label>
</div>
<script>
document.addEventListener("click", event => {
// выведем значение в окошко?
if(event.target.matches("[name=browser]:checked"))
alert(`Значение --> ${event.target.value}`);
});
</script>
|
|
Я попробовал адаптировать вариант, предложенный Malleys, но не совсем удачно получилось
var gender = document.getElementById("gender");
gender.addEventListener("click");
genderinp = localStorage.getItem("genderinp");
if (event.target.matches("[name=browser]:checked"))
{
localStorage.setItem("genderinp") = $(event.target.value);
}
genderinp = localStorage.getItem("genderinp");
console.log("Пол - " + genderinp);
Выходит ошибка "Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': 2 arguments required, but only 1 present." |
Defrazo, Да всё правильно у вас в 2 строке ошибка, надо обработчик тоже!
<div class="field">
<p class="title1 noma">
<b>Ваш пол:</b></p>
<label><input type="radio" class="inpdata noma rad" name="browser" id="gender" value="man" required> Мужской</label>
<label><input type="radio" name="browser" value="woman"> Женский<br></label>
</div>
<script>
document.addEventListener("change", event => {
if(event.target.matches("[name=browser]:checked")) {
localStorage.setItem("genderinp", event.target.value);
let gender = localStorage.getItem("genderinp");
console.log("Пол - " + gender);
}
});
</script>
|
Malleys, Ваш способ сработал, с двумя но:
1. Значения присваиваются не с первого раза (при клике на кнопку, выполняющую скрипт в console выдает все значения "null", при повторном клике выдает выбранные значения. 2. Если видоизменить код, то при выборе Мужского пола выходит значение "undefined", затем при клике на Женский - "woman", и если кликнуть на Мужской после клика по Женскому, только тогда выходит значение "man" Вот код из первого случая. В принципе рабочий вариант, но очень беспокоит то, что значения принимаются лишь со второго раза..
document.addEventListener("click", event => {
if (event.target.matches("[name=browser]:checked"))
{
localStorage.setItem("genderinp", event.target.value);
}
});
genderinp = localStorage.getItem("genderinp");
console.log("Пол - " + genderinp);
|
С проблемой разобрался. Оказалось, что обработчик начинал слушать только после клика по кнопке "Завершить", которая запускала скрипт, а подразумевалась как записывающая результат.
Все операции, которые слушали и заносили результат в localStorage были вынесены в другой скрипт, который работал по $(document).ready и тогда все стало пучком) Спасибо за помощь:yes: |
| Часовой пояс GMT +3, время: 03:33. |