0

Имеется input file внутри формы (form), а форма внутри списка(ul).

  <ul id="file{{ $theme->id }}" class="collapse tree" aria-labelledby="file" >
    <form class="form ml-2 mb-2 mt-0" role="form" id="form{{ $theme->id }}" method="POST" action="{{ url('') }}" enctype="multipart/form-data">
 @csrf
 <input type="hidden" name="themeId" value="{{ $theme->id }}">
 <input type="file" name="themesFiles[]" id="themesFiles{{ $theme->id }}" class="inputfile-addThemeFile"  multiple="true"/>
 <label for="themesFiles{{ $theme->id }}" class="btn btn-sm btn-primary inputlabel-addThemeFile{{ $theme->id }} mb-0">
 <i class="fas fa-plus-square h5-responsive white-text pr-2" title="Добавить файлы"></i>
Добавить файлы
</label>
</form>
</ul>

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

<script>
$('#themesFiles{{ $theme->id }}').change(function(e){
$('.inputlabel-addThemeFile{{ $theme->id }}').html('<div class="spinner-border text-info" role="status"><span class="sr-only"></span></div><br> <small>файлы ожидают загрузки</small>');
});
</script>

Но ничего не происходит, в консоле все чисто, ID инпута и скрипта совпадают. Заранее благодарю за помощь)

введите сюда описание изображения

1 ответ 1

0

Очевидно, проблема в конструкции {{ $theme->id }}. В разметке, видимо, туда подставляется какое-то значение. А в скрипте не подставляется: в скрипте вот это вот всё '#themesFiles{{ $theme->id }}' - одна строчка, т.е. скрипт ожидает именно такого селектора и не получает его.

Если убрать из когда {{ $theme->id }}, то всё работает:

$('#themesFiles').change(function(){
	$('.inputlabel-addThemeFile').html('<div class="spinner-border text-info" role="status"><span class="sr-only"></span></div><br> <small>файлы ожидают загрузки</small>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="file" class="collapse tree" aria-labelledby="file" >
    <form class="form ml-2 mb-2 mt-0" role="form" id="form" method="POST" action="{{ url('') }}" enctype="multipart/form-data">
 <input type="hidden" name="themeId" value="">
 <input type="file" name="themesFiles[]" id="themesFiles" class="inputfile-addThemeFile"  multiple="true"/>
 <label for="themesFiles" class="btn btn-sm btn-primary inputlabel-addThemeFile mb-0">
 <i class="fas fa-plus-square h5-responsive white-text pr-2" title="Добавить файлы"></i>
Добавить файлы
</label>
</form>
</ul>

9
  • Действительно, когда убираю id все работает. Но почему не работает с id? например в скрипте #themesFiles5 судя по консоли и в инпуте id themesFiles5. Должно же работать?..
    – BorsheC
    31 мар 2019 в 11:36
  • @BorsheC, есть вариант писать селектор по началу атрибута - типа $('id^="themesFiles"'). Тогда скрипт возьмёт id, который начинается с themesFiles, и ему будет неважно, что там подставляется в {{ $theme->id }} 31 мар 2019 в 11:45
  • Я добавил выше скрин. Все остальные у меня скрипты по такой же конструкции и все отлично подтягивает. $('id^="themesFiles"'). это я так понял будет работать для одного инпута, а если их 20?
    – BorsheC
    31 мар 2019 в 11:50
  • @BorsheC, для всех инпутов, у которых id начинается с themesFiles 31 мар 2019 в 11:51
  • Ну тогда он поменяет во всех 20ти инпутах, а надо в одном на который нажали, поэтому я id и присваиваю.... или чего то не понимаю....
    – BorsheC
    31 мар 2019 в 11:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.