Отправка нескольких 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) {

                });
            }


        });



    });

Ответы (0 шт):