javascript - 複数のフォームを送信できない

Question

以下に示すように、チェックボックスをオンにしてから [選択済み] ボタンをクリックすることで、Web サイト管理者が一度に複数のコンテンツを削除できる機能を実装しようとしています。

つまり、一度に複数のフォームを送信する必要があり、オンラインで回避策を調べましたが、うまくいかないようです。SELECTEDボタンをクリックすると、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>