Проверьте val нескольких полей ввода и, если нет пустых, создайте новое поле ввода

Question

Я хочу, чтобы пользователь выбирал файл для создания дополнительного ввода для файла, но если одно из созданных полей ввода пустое, чтобы не создавать новое

Html:

<div class="pickerColors">
  <div class="color"><input class="selectFile" id="sortpicture" type="file" name="sortpic" />
</div>
</div>

JS:

  function test(){
        var totalFields = $('.selectFile').length;
        for(i=0;i<totalFields;i++){
            if($('.selectFile').eq(i).val()==""){
                return false;

            }


        }
    }
    $('body').on('change', '.selectFile', function () {
        var parent =  $(this).parent().attr("id");
        test();
       if(test() != false){
           $('#'+parent).append('<input class="selectFile" id="sortpicture" type="file" name="sortpic" />');
       }

        });

Answer 1

Есть несколько вещей:

1. вы не должны создавать элементы с несколькими идентификаторами
2. ваши входные данные не должны иметь одно и то же имя, если вы отправляете на сервер, Вы должны отправить несколько значений, добавив [] в конец имени
3. jQuery не нужно, если вы еще не загружаете его для чего-то другого, попробуйте избежать его
4. . может определить, имеют ли входы значение, используя метод Array.prototype.some

document.querySelector('body').addEventListener('change', function(e) {
  let tgt = e.target
  if (tgt.classList.contains('selectFile')) {
    let container = tgt.closest('.color')
    
    if (!isEmptyInputAvailable()) {
      const div = document.createElement('div')
      div.innerHTML = '<input class="selectFile sortpicture" type="file" name="sortpic[]" />'
      container.append(div)
    }
  }
})

function isEmptyInputAvailable() {
  let inputs = document.querySelectorAll('.sortpicture')
  return Array.from(inputs).some(input => input.value == '')
}

<div class="pickerColors">
  <div class="color"><input class="selectFile sortpicture" type="file" name="sortpic[]" />
  </div>
</div>

Answer 2

Нашли решение

function isEveryInputEmpty() {
    var notEmpty = true;

    $('.newImage').each(function() {
        if ($(this).val() == '') {
            notEmpty = false;
            return false; // we've found a non-empty one, so stop iterating
        }
    });

    return notEmpty;
}

$('body').on('change', '.newImage', function () {
    var parent =  $(this).parent().attr("id");

   if(isEveryInputEmpty() == true){
        $('#'+parent).append('<input  class="newImage" id="sortpicture" type="file" name="sortpic" />');
    }

    });