Невозможно получить динамическое c значение идентификатора ввода для функции javascript

Question

Пожалуйста, мне нужна помощь ..

@foreach
 <input  id="mar1bags" class="form-control" name="mar1bags" value="">
@endforeach

Я использую foreach l oop, чтобы получить некоторые данные, а также это поле ввода также внутри меня для ввода данных.

Но теперь проблема в том, что я не могу использовать GetelementbyID для получения значений в javascript. он возвращает только для первого поля ввода, но другие не получают.

Я получаю эту ошибку в своей консоли, когда пытаюсь передать javascript function

[ DOM] Найдено 3 элемента с неуникальным id # mar1bags:

Answer 1

Кажется, что l oop создает более одного входа, но продолжает устанавливать для них один и тот же идентификатор. Поскольку идентификатор предполагается уникальным, он недопустим (а также метод getElementById не будет работать).

Вместо этого можно использовать метод .querySelectorAll, а синтаксис:

document.querySelectorAll('[property=value]');

РЕДАКТИРОВАТЬ в вашем случае:

<script>
var hht; // declare the var GLOBAL
console.log(hht + ' before function');
function checkVal() { // make a function that will check the value
  let inputData = document.querySelectorAll('[name=mar1bags]');
  // now you can iterate inputData using a loop.
  // Using for loop will be something like this:
  for (var i=0; i < inputData.length; i++) {
    var checkEmpty = inputData[i].value.length; // get each value length
    if (checkEmpty > 0) { // if it holds more then one chareter then
      hht = inputData[i].value; // assign this to the GLOBAL
    }
  }
}
console.log(hht + ' after function');
</script>    

Наслаждайтесь кодом!

Answer 2

Эй, если вы используете jquery или javascript для взаимодействия с этими значениями, вам нужно добавить уникальное имя ввода и идентификатор: проверьте ответ от @ erwan

или если вы используете нормальную форму , чем, возможно, просто изменить имя входа, чтобы принимать массив значений, так что вы можете получить все входные данные в виде массива на серверной части при отправке формы.

@foreach
 <input  id="mar1bags" class="form-control" name="mar1bags[]" value="">
@endforeach

Answer 3

как упоминалось выше, ваш идентификатор дублируется, поэтому он не будет работать. вместо этого я бы сделал:

@foreach <input id="mar1bags-{{ $loop->iteration }}" class="form-control" name="mar1bags-{{ $loop->iteration }}" value=""> @endforeach

<script>
let inputs = document.querySelectorAll('[id^=mar1bags-]');
for (var i=0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}
</script>