2016-12-17 35 views
0

即时通讯工作在列出记录的应用程序,每个记录我有一个编辑和删除按钮。总是提交相同的表格

在我看来,我已经在删除按钮中包含了一个采取动作url路径的表单,它们之间的不同之处在于需要使用不同的id来稍后在删除中标识记录。有了这个即时通讯使用甜蜜的警报,删除记录之前弹出只是为了确认,并在确认它提交表单时,唯一的问题是提交第一个表单,我不是因为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> 

回答

1

$(".delete-form")比赛所有的形式,而不仅仅是一个与用户点击的按钮。您需要使用$(this)中的DOM遍历来获取选定的表单。

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

可以使用closest()属性提交的具体形式是这样的:

$(function() { 
 

 
    $('.delete').on('click', function(e) { 
 
    \t e.preventDefault(); 
 
    var action_attr = $(this).closest('form.delete-form').attr('action'); 
 
    \t 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>

希望THI帮助!