Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.01.2017, 01:11
Новичок на форуме
Отправить личное сообщение для Defrazo Посмотреть профиль Найти все сообщения от Defrazo
 
Регистрация: 03.01.2017
Сообщений: 5

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. Буду очень признателен если мы решим это проблему)
Ответить с цитированием
  #2 (permalink)  
Старый 03.01.2017, 01:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 03.01.2017, 02:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Defrazo,
localStorage.getItem
Ответить с цитированием
  #4 (permalink)  
Старый 03.01.2017, 02:58
Новичок на форуме
Отправить личное сообщение для Defrazo Посмотреть профиль Найти все сообщения от Defrazo
 
Регистрация: 03.01.2017
Сообщений: 5

Я попробовал адаптировать вариант, предложенный 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."
Ответить с цитированием
  #5 (permalink)  
Старый 03.01.2017, 03:15
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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, 04.01.2017 в 07:10. Причина: Поменял событие click на change
Ответить с цитированием
  #6 (permalink)  
Старый 03.01.2017, 21:55
Новичок на форуме
Отправить личное сообщение для Defrazo Посмотреть профиль Найти все сообщения от Defrazo
 
Регистрация: 03.01.2017
Сообщений: 5

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);
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2017, 00:52
Новичок на форуме
Отправить личное сообщение для Defrazo Посмотреть профиль Найти все сообщения от Defrazo
 
Регистрация: 03.01.2017
Сообщений: 5

С проблемой разобрался. Оказалось, что обработчик начинал слушать только после клика по кнопке "Завершить", которая запускала скрипт, а подразумевалась как записывающая результат.
Все операции, которые слушали и заносили результат в localStorage были вынесены в другой скрипт, который работал по $(document).ready и тогда все стало пучком) Спасибо за помощь
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery получить родителя и обратится к элементу внутри по class _Eldar_ Общие вопросы Javascript 6 05.04.2015 19:32
Как получить значение цвета из color picker razorg1991 jQuery 1 06.10.2014 09:06
Как получить значение переменной из игры на HTML5? Dimaz Общие вопросы Javascript 6 10.08.2014 16:27
получить значение в url Юсуф Events/DOM/Window 2 21.06.2014 19:39
получить значение атрибута из xml ErshKUS Общие вопросы Javascript 2 19.05.2011 21:28