Я пытаюсь создать простую форму обратной связи. Пользователь ответит на ряд вопросов «да» или «нет». Если они выберут «нет», им будет предоставлена форма комментария для включения текста.

В настоящее время у меня проблемы с получением значений переключателей. Я пытаюсь распечатать их в консоли, но ничего не происходит, когда я выбираю подходящий вариант. Если пользователь выбирает «нет», он должен иметь возможность запомнить комментарий, который будет отправлен.

Мой 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
});
0
kaoscify 15 Дек 2015 в 23:45

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
});

Скрипка

1
Robin Carlo Catacutan 15 Дек 2015 в 20:50

{{Х0}} Это ищет что-то конкретно с именем choice, которого нет в вашем html.

Есть два быстрых способа об этом. Во-первых, просто измените ваш селектор:

$('input[type=radio]').on('click', function(){...

Это вызовет функцию по щелчку любого радио

Другой способ - с помощью селектора подстановочных знаков:

var firstInput = 'input[name^=choice]';

^ должен сделать так, чтобы любой вход с именем, начинающимся с choice, был выбран.

Этот метод должен работать, но таргетинг input[type=radio], вероятно, является лучшим решением,

1
neilsimp1 15 Дек 2015 в 21:01

Ваш селектор пытается получить теги с именем, равным «выбору». Вы можете искать по префиксу со следующим

var firstInput = 'input[name|="choice"]';

Это получит все теги, название которых начинается с 'choice'

0
Gus 15 Дек 2015 в 20:54

Вам не хватает -1 в вашем имени

var firstInput = 'input[name=choice-1]';
0
hogarth45 15 Дек 2015 в 20:52