Отправка нескольких dropzone форм через одну кнопку
Как можно организовать отправку нескольких форм dropzone через одну кнопку ? Пользователь создает n количество форм, заполняет их, после завершения должен нажать одну кнопку и все формы улетят в обработчик. Сейчас все работает таким образом - Создаем новую форму и после нажатия sumbit отправляем ее в обработчик, и так с каждой.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active nav-link-add" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Пункт 1</button>
<button class="nav-link" id="add-button" type="button">+Add</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active tab-pane-add" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<form id="upload-form-part" class="dropzone part-form" style="border: none; padding:0!important;">
<input id="part_number" name="part_number" value="1" hidden>
<!-- Описание диагностики -->
<div class="mb-3">
<label for="text-part" class="form-label">Введите описание диагностики</label>
<textarea name="text-part" class="form-control is-invalid" id="text-part" required></textarea>
<div class="valid-feedback">
Хорошо!
</div>
<div class="invalid-feedback">
Заполните поле!
</div>
</div>
<!-- Загрузка изображений -->
<div class="col-sm-4 mt-3" style="margin-bottom:2rem;">
<label class="form-label">Добавить изображений</label>
<div class="form-control " style="padding:0; min-height:0;">
<div class="dz-default dz-message" style="margin: 0;">
<button class="dz-button" type="button"><img src="../../assets/img/web/download.svg" width="28px" height="28px"> Добавить изображений</button>
</div>
</div>
</div>
<div id="previews" class="text-center"></div>
<div class="mt-3">
<button type="submit" id="addbtn" name="errors-create" class="btn btn-primary col-6">Добавить неисправность</button>
</div>
</form>
</div>
</div>
JS:
Dropzone.autoDiscover = false;
var count = 1;
var num = $("#part_number").val() + count;
$("#upload-form-part").dropzone({
url: '/addRepair/file.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 10,
addRemoveLinks: true,
previewsContainer: "#previews",
dictRemoveFile: 'Удалить',
init: function() {
var myDropzone = this;
var clickId = $(this).attr('id');
$('#upload-form-part').submit(function(r) {
r.preventDefault();
r.stopPropagation();
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = {
'chunked': this.dropzone.chunking
};
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
});
this.on("sendingmultiple", function() {
});
this.on("successmultiple", function(files, response) {
});
this.on("errormultiple", function(files, response) {
});
}
});
// Проверка на описание диагностики
$("#text-part").on("keyup", function() {
var data = $(this).val();
if (data == "") {
$("#text-part").addClass("is-invalid").removeClass("is-valid");
} else {
$("#text-part").removeClass("is-invalid").addClass("is-valid");
}
});
$('#add-button').on('click', function() {
count++;
var num = $("#part_number").val() + count;
var cloneNav = $('.nav-link-add').clone()
.removeClass("nav-link-add")
.removeClass("active")
.attr('id', 'nav-tab-part-' + count)
.attr('data-bs-target', '#nav-part' + count)
.attr('aria-controls', 'nav-part' + count)
.html('Пункт ' + count)
.insertBefore("#add-button");
var cloneTab = $('.tab-pane-add').clone()
.removeClass("tab-pane-add")
.removeClass("active")
.removeClass("show")
.attr('id', 'nav-part' + count)
.attr('aria-labelledby', 'nav-tab-part-' + count)
.appendTo("#nav-tabContent")
// Изменяем id формы
cloneTab.find('[class*="part-form"]').attr('id', 'upload-form-part' + count)
// Меняем номер пункта для отправки
cloneTab.find('[name*="part_number"]').attr('value', count)
// // Меняем зону отображения файлов
cloneTab.find('[id*="previews"]').attr('id', 'previews' + count).html('');
// Изменение поля ввода информации
cloneTab.find('[name*="text-part"]').attr('id', 'textAreaPart' + count).val(' ')
// Проверка на внесение данные в поле
$("#textAreaPart" + count).on("keyup", function() {
var data = $(this).val();
if (data == "") {
$("#textAreaPart" + count).addClass("is-invalid").removeClass("is-valid");
} else {
$("#textAreaPart" + count).removeClass("is-invalid").addClass("is-valid");
}
});
Dropzone.autoDiscover = false;
$("#upload-form-part" + count).dropzone({
url: '/addRepair/file.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 10,
addRemoveLinks: true,
previewsContainer: "#previews" + count,
dictRemoveFile: 'Удалить',
init: function() {
var myDropzone = this;
var clickId = $(this).attr('id');
$("#upload-form-part" + count).submit(function(t) {
t.preventDefault();
t.stopPropagation();
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = {
'chunked': this.dropzone.chunking
};
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
});
this.on("sendingmultiple", function() {
});
this.on("successmultiple", function(files, response) {
// $('#offcanvasTop').removeClass('show');
$(".offcanvas-header").css("opacity", "0");
$(".offcanvas-body").css("opacity", "0");
$(".message").css("display", "block");
$(".offcanvas-backdrop").animate({
opacity: 0.7,
},
"slow"
);
});
this.on("errormultiple", function(files, response) {
});
}
});
});