Блог

Главная - Вопросы по программированию - Выбор всех входных данных с одинаковым именем возвращает 1 значение

Выбор всех входных данных с одинаковым именем возвращает 1 значение

#jquery #forms

#jquery #формы

Вопрос:

у меня есть форма с 16 числовыми входами, я написал функцию «щелчка» следующим образом : 

 $("#continue").click(function (e) {
      var mealOption = $("input[name='option[]']").val();
      console.log(mealOption);
}

Это возвращает только 1 значение, хотя ВСЕ 16 входных данных используют одно и то же имя: option[] , независимо от того, сколько числовых входных данных я ввожу, он вернет только 1 значение, которое является первым значением в списке входных данных.

Где я ошибся?

Большое спасибо!

Комментарии:

1. Можете ли вы также вставить свой HTML, пожалуйста?

Ответ №1:

Согласно официальному документу jQuery о .val() методе:

Получите текущее значение первого элемента в наборе сопоставленных элементов или задайте значение каждого сопоставленного элемента.

Это означает, что когда ваш поисковый запрос DOM возвращает коллекцию, для обработки будет выбран только 1-й элемент.

Но, если у вас есть все ваши <input> элементы в <form> , вы можете использовать .serialize() или .serializeArray() :

 $('form').on('submit', function (event) {
  event.preventDefault();
  event.stopPropagation();

  const v = $(this).serializeArray();
  $('.values').text(JSON.stringify(v, null, '  '));
});  
 .values {
  font-family: monospace;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <form>
    <input type="text" name="option" placeholder="input 1" />
    <input type="text" name="option" placeholder="input 2" />
    <input type="text" name="option" placeholder="input 3" />
    <button type="submit">get values</button>
  </form>
  <pre class="values">input values...</pre>
</body>

В противном случае вы делаете что-то вроде этого:

 $('input[name="option"]').each(function () { console.log($(this).val()); });

Ответ №2:

Вам нужно выполнить итерацию по каждому из 16 элементов.

 $("input[name='option[]']").each(function(opt) {
  var mealOption = opt.val();
  console.log(mealOption);
});

$("input[name='option[]']") получает все 16 элементов, но при вызове .val() jQuery выбирает первые элементы (под обложками).