Я создаю 8 динамических блоков ввода по максимуму, по одному за кликом. Я хочу сохранить их значения в массиве таким образом, чтобы, если я добавил 4 кнопки, сохранил 4 значения в массиве и отобразил их в предупреждении, если я добавил 5 значений, сохранил 5 значений в массиве и отобразил их в предупреждении и т. Д. Что я сделал до сих пор:

Javascript:

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue).value;
    data.push(input);
  }
 alert(data);
}

Он только предупреждает о значениях полей ввода. Если я добавил все 8 полей ввода, в противном случае он говорит: «Невозможно прочитать свойство« значение »нулевого значения». Изменить: я даю идентификаторы для этих полей ввода как (частично):

  var inputField = document.createElement('INPUT');
  inputField.id = 'input - '+fieldValue;

  fieldValue++;

Он устанавливает идентификаторы в качестве входных данных - 1, входных данных - 2 и т. Д. Заранее спасибо.

0
Haseeb Hassy 30 Авг 2017 в 15:54

3 ответа

Лучший ответ

Вы цикл от 1 до 8.

Если вы добавили менее 8 полей ввода (скажем, 5), в какой-то момент document.getElementById ('input -' + fieldValue) вернет ноль, потому что в документе не будет элемента с идентификатором input - 6 ' ,

Чтобы обезопасить свой код, вы должны проверить, если document.getElementById ('input -' + fieldValue) не равен NULL, прежде чем пытаться получить данные.

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue);
    if (input != null) 
       data.push(input.value);
  }
 alert(data);
}
2
Guillaume Georges 30 Авг 2017 в 12:59

Как уже упоминалось, вы повторяете 8 раз, даже если нет 8 элементов ввода. Это может быть намного проще, используя селектор класса и jQuery и итерацию для каждого элемента, который разделяет этот класс.

function show(){
    var data = [];
    $.each($('.input-item'), function(key, val){
        data.push($(val).val());
    })
   alert(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="input-1" class="input-item" />
  <input type="text" id="input-2" class="input-item" />
  <input type="text" id="input-3" class="input-item" />
  <input type="text" id="input-4" class="input-item" />
  <input type="text" id="input-5" class="input-item" />
  <input type="text" id="input-6" class="input-item" />
  <input type="text" id="input-7" class="input-item" />
  <input type="text" id="input-8" class="input-item" />
  <button type="button" onclick="show()">Click me</button>
</form>
0
big nol 30 Авг 2017 в 13:04
function show() {
  var data = [];
  for (fieldValue = 1; fieldValue <= 8; fieldValue++) {
    var input = document.getElementById('input - ' + fieldValue);
    if (inpt) {
      input = input.value;
      data.push(input);
    }

  }
  alert(data);
}
-1
bluehipy 30 Авг 2017 в 12:59