Как добавить второе поле для загрузки файлов в форму, если она полностью на JS?

Question

[Леонид Невзоров]

Доброго дня уважаемые.
Есть скрипт формы smartlid. Она сделана полностью на JS, то есть сама форма в привычной нам html обертке осутствует. А если быть совсем точным, то html вид сама оболочка формы формируется только на выходе (в браузере).
Вот код:

Вот сайт разработчика с исходником: SmartLid — скрипт обратного звонка
Суть проблемы такова: Не могу добавить второе поле загрузки файла. Пробовал по всякому, ровно столько всего, на сколько хватает моих познаний JS, а их у меня к сожалению немного.
Прошу помощи и совета, как сделать второе поле в форме, для загрузки файла?

Answer 1

[Леонид Невзоров]

Нашел ответ самостоятельно.
Спасибо "Гуру" за помощь в данном вопросе.
Тем кому это может пригодится прилагаю измененный код js, обработчик php дописать не составит труда:


Всего навсего надо было задать разные fileName.
И ни кто не смог подсказать.
Ну да ладно, может религия не позволила.)))

Comments

[Konata Izumi]

религия не позволила

Вы предоставили достаточно большой кусок кода, чтобы разобраться в котором нужно время и силы. Максимум, на что можно рассчитывать - что подтолкнут в нужную сторону. Но никак не будут решать за вас задачи бесплатно.

Answer 2

[Konata Izumi]

Судя по документации к этому скрипту(библиотеке) такой возможности нет.
Вам придется расширять исходную библиотеку, перед этим досконально разобравшись в её работе. При этом вы
скорее всего потеряете возможность обновления этой библиотеки.

Варианты решения:
1. Разобраться в коде, расширить так, как вам надо - это будет долго, а без должного уровня навыка - практически невозможно.
2. Найти более гибкое решение, где есть возможность кастомизации формы.
3. Отдать задачу на фриланс.

Comments

[Леонид Невзоров]

Все дело в том, что само поле я добавил без проблем:

if (defaults.requestFormAddFile) {
				var fileWrapper1 = $('<div>').attr({
					class: 'smartlid__file-wrapper'
				});
				var fileName = $('<input>').attr({
					class: 'smartlid__input smartlid__file-name',
					placeholder: 'Прикрепить файл',
					disabled: 'disabled',
				});
				let inputFileLabel = $('<label>').attr({
					for: 'smartlid__input_file1',
					class: 'smartlid__label smartlid__label_file'
				}).html('Выбрать');

				let inpFile = $('<input>').attr({
					class: 'smartlid__input smartlid__input_file',
					type: 'file',
					name: 'files1[]',
					id: 'smartlid__input_file1'
				}).change(function () {
					fileName.val($(this).val().replace(/.*\\/, ""));
				});
				fileWrapper1.append(fileName).append(inputFileLabel).append(inpFile);
			}

И в строке 663 добавил новый .append с fileWrapper1.
Поле добавилось в форму.
Но при выборе файла, работает только одно поле, а второе остается пустым.
Именно это я и не могу понять. Что не дает полноценно отработать полю?

[Konata Izumi]

Леонид Невзоров, Почитайте про события в js и поймете.