Я пытаюсь создать простую форму обратной связи. Пользователь ответит на ряд вопросов «да» или «нет». Если они выберут «нет», им будет предоставлена форма комментария для включения текста.
В настоящее время у меня проблемы с получением значений переключателей. Я пытаюсь распечатать их в консоли, но ничего не происходит, когда я выбираю подходящий вариант. Если пользователь выбирает «нет», он должен иметь возможность запомнить комментарий, который будет отправлен.
Мой JSFiddle находится здесь: http://jsfiddle.net/787x18vx/
HTML
<p>You are providing feedback</p>
<form>
<div id="question-1">
<label for="question-1">Is this correct?</label>
<input type="radio" value="yes" name="choice-1" />Yes
<input type="radio" value="no" name="choice-1" />No
</div>
<div id="question-2">
<label for="question-2">Another question</label>
<input type="radio" value="yes" name="choice-2" />Yes
<input type="radio" value="no" name="choice-2" />No
</div>
<div id="question-3">
<label for="question-3">One more question</label>
<input type="radio" value="yes" name="choice-3" />Yes
<input type="radio" value="no" name="choice-3" />No
</div>
<br />
<button>Send Feedback</button>
</form>
jQuery
var firstInput = 'input[name=choice]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
4 ответа
Вы используете input[name=choice]
селектор, который не существует.
Используйте input[type=radio]
вместо этого.
var firstInput = 'input[type=radio]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
{{Х0}} Это ищет что-то конкретно с именем choice
, которого нет в вашем html.
Есть два быстрых способа об этом. Во-первых, просто измените ваш селектор:
$('input[type=radio]').on('click', function(){...
Это вызовет функцию по щелчку любого радио
Другой способ - с помощью селектора подстановочных знаков:
var firstInput = 'input[name^=choice]';
^
должен сделать так, чтобы любой вход с именем, начинающимся с choice
, был выбран.
Этот метод должен работать, но таргетинг input[type=radio]
, вероятно, является лучшим решением,
Ваш селектор пытается получить теги с именем, равным «выбору». Вы можете искать по префиксу со следующим
var firstInput = 'input[name|="choice"]';
Это получит все теги, название которых начинается с 'choice'
Вам не хватает -1 в вашем имени
var firstInput = 'input[name=choice-1]';
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.