Question

我正在尝试实现一种功能，网站管理员可以通过选中复选框然后单击 SELECTED 按钮一次删除多个内容，如下所示。

这意味着我必须一次提交多个表格，我在网上查找了一个解决方法，但我似乎无法使其正常运行。单击 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>

Answer 1

无法同时提交多个表单。这是合乎逻辑的，因为提交表单时的默认行为是服务器的响应作为新页面加载。

相反，我建议您更改HTML，以便您需要提交的所有值都在单个表单中，或者创建一个包含您要提交的值的对象，并将它们发送到您的服务器使用AJAX（http://api.jquery.com/jquery.ajax/）代替。

提交多个表格不起作用

1 个答案: