Question

我在一个列出记录的应用程序中工作，每个记录我都有一个编辑和删除按钮。

在我看来，我已经在删除按钮中包含了一个采用动作URL路径的表单，彼此不同的是，它采用不同的ID来稍后识别删除中的记录。使用这个im使用甜蜜的警报，在删除记录之前弹出以确认，如果确认它提交表单，唯一的问题是提交第一个表单，我不是因为id是第一个，我相信不是在我的javascript中提交当前表单，无法弄清楚为什么不工作。

我的代码JS：

 <script>
        $('button.delete').on('click', function(event){
            event.preventDefault();
            swal({
                        title: "Are you sure",
                       text: "Can i delete?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Sim!",
                        closeOnConfirm: false
                    },
                    function(){
                        $(".delete-form").submit();
                    });
        })
    </script>

在for循环中

 <form class="delete-form" style="display: inline" method="POST" action="/admin/categories/{{$category->id}}"  >
                                            {{ method_field('DELETE') }}
                                            {{csrf_field()}}
                                       <button class="btn btn-danger btn-xs delete"  ><i class="fa fa-trash"></i> delete</button>

                                        </form>

Answer 1

CREATE TABLE objects ( object_id serial NOT NULL PRIMARY KEY, root_node integer ); CREATE TABLE nodes ( node_id integer NOT NULL PRIMARY KEY, object_id integer REFERENCES objects ); ALTER TABLE objects ADD CONSTRAINT root_node_fkey FOREIGN KEY (root_node) REFERENCES nodes(node_id); -- Why this constaint is needed? Since node_id is primary key this combination should be already UNIQUE ALTER TABLE nodes ADD CONSTRAINT node_id_object_id_unique UNIQUE (node_id, object_id); ALTER TABLE objects ADD CONSTRAINT objects_nodes_fkey FOREIGN KEY (object_id, root_node) REFERENCES nodes (object_id, node_id);匹配所有表单，而不仅仅是用户点击的按钮。您需要使用$(".delete-form")中的DOM遍历来获取所选表单。

$(this)

Answer 2

您可以使用closest()属性提交如下所示的特定表单：

$(function() {

  $('.delete').on('click', function(e) {
  	e.preventDefault();
    var action_attr = $(this).closest('form.delete-form').attr('action');
  	console.log("Delete form - " + action_attr);
    // $(this).closest('.delete-block').find('form').submit();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="delete-form" style="display: inline" method="POST" action="/admin/categories/1"  >
    <button class="btn btn-danger btn-xs delete"  ><i class="fa fa-trash"></i> delete 1</button>
</form>


<form class="delete-form" style="display: inline" method="POST" action="/admin/categories/2"  >
    <button class="btn btn-danger btn-xs delete"  ><i class="fa fa-trash"></i> delete 2</button>
</form>



<form class="delete-form" style="display: inline" method="POST" action="/admin/categories/3"  >
    <button class="btn btn-danger btn-xs delete"  ><i class="fa fa-trash"></i> delete 3</button>
</form>

希望这有帮助！

提交始终相同的表格

2 个答案: