Отправить несколько форм не работает

Я пытаюсь реализовать функциональность, при которой администратор веб-сайта может удалить сразу несколько материалов, установив флажки и нажав кнопку ВЫБРАН, как показано ниже.

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

Это означает, что я должен отправить несколько форм одновременно, и я искал обходной путь онлайн, но я не могу заставить его работать. После нажатия кнопки ВЫБРАН deleteRecords() называется. Код показан ниже:

function deleteRecords() {

    //--- Creating array of selected rows ---
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        //-- Declaring variables ---
        var delFlagForm;   //-- form
        var action;        //-- form action
        var formID;        //-- form id
        var submitFormStr; //-- string of forms' id's 

        //--- Creating form for each row selected ---
        for (var i = 0; i < arrayOfIDs.length; i++) {
            delFlagForm = document.createElement("form"); //-- Creating form 
            action = "/delete_flag/" + arrayOfIDs[i];            //-- Creating action link
            formID = 'form' + i;                          //-- Creating id (form0, form1, etc)
            delFlagForm.setAttribute("id", formID);       //-- Assigning id to form
            delFlagForm.setAttribute("method", "post");   //-- Assigning method to form 
            delFlagForm.setAttribute("action", action);   //-- Assigning action to form 

            //--- Creating string of forms' id's
            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }

        //--- Submiting forms at once ---
        //-- For the table shown above, submitFormStr = "#form0 #form1" 
        $(submitFormStr).submit(); // = $('#form0 #form1').submit();
}

Таким образом, очевидно, что код, показанный выше, должен представлять form0 и form1, таким образом удаляя выбранные записи. Но по какой-то причине формы не отправляются и ничего не происходит вообще.

Можете ли вы обнаружить любую ошибку?

----------- РЕДАКТИРОВАТЬ - РЕШЕНИЕ -----------

Чтобы решить эту проблему, я попытался игнорировать запросы с помощью AJAX и сейчас работает. Вот как выглядит новый код:

<script>
        function deleteRecords() {
            var arr;
            arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
                return $(this).closest('tr').find('td:nth-child(2)').text();
            }).get();   

            var delFlagForm;
            var action; 
            var formID;
            var submitFormStr;

            for (var i = 0; i < arr.length; i++) {
                delFlagForm = document.createElement("form");
                action = "/delete_flag/" + arr[i];
                formID = 'form' + i;
                delFlagForm.setAttribute("id", formID);
                delFlagForm.setAttribute("method", "post");
                delFlagForm.setAttribute("action", action);

                ignoreRequest(delFlagForm);
            }
        }

        function ignoreRequest(form) {
            var formID = $('#' + form.id);
            var action = form.action;
            $.ajax({
                type: "POST",
                url: action, //action
                data: formID,

                success: function (data) {
                    location.reload();
                },
                error: function(jqXHR, text, error){
                    console.log(error);
                }
            });
            return false;
        }
    </script>

1 ответ

Решение

Невозможно отправить несколько форм одновременно. Это логично, поскольку при отправке формы поведение по умолчанию заключается в том, что ответ сервера загружается как новая страница.

Вместо этого я бы порекомендовал вам либо изменить свой HTML-код, чтобы все значения, которые необходимо отправить, находились внутри одной формы, либо создать объект, содержащий значения, которые вы хотите отправить, и отправить их на свой сервер с помощью AJAX ( http://api.jquery.com/jquery.ajax/).

Другие вопросы по тегам