使用數據屬性提交表單

Question

請我根據其data-id刪除特定記錄，例如： data-id="delete-form-{{ $position->id } }，但是任何時候我嘗試它總是返回最后一個記錄ID甚至無法刪除。

下面是我的代碼

@forelse ($pos as $position)
               <tr>
                <td>{{ $loop->index+1 }}</td>
                <td>{{ $position->name }}</td>
                <td>{{ $position->created_at->diffForHumans() }}</a></td>
                <td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td>
                <td>
                    <form data-id="delete-form-{{ $position->id }}" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none">
                        @csrf
                        @method('DELETE')
                    </form>
                    <a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()">
                     <i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a>
                    </td>
            </tr>

            @empty
            <p>No Record available</p>
            @endforelse

JavaScript的

 <script>
$('.posSwal').click(function(){ 
    event.preventDefault();
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function(isConfirm) {
        if (isConfirm) {
            $("form").data("id").submit();
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });
});

Answer 1

但任何時候我嘗試它總是返回最后一個記錄ID，甚至無法刪除。

發生這種情況是因為您沒有引用當前單擊的錨元素。 在點擊處理程序中，您可以在preventDefault之前保存當前錨點：

let ele = this;

並且在您的swal中，您可以計算當前的id和url以便使用ajax而不是提交表單：

var id = $(ele).closest('td').find("form").data("id");
var url =  $(ele).closest('td').find("form").attr('action');
$.post(url, { id:  id });

 function isConfirm() { } $('.posSwal').on('click', function(e){ event.preventDefault(); let ele = this; swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm) { if (isConfirm) { var id = $(ele).closest('td').find("form").data("id"); var url = $(ele).closest('td').find("form").attr('action'); console.log('current id is: ' + id); $.post(url, { id: id }); swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/bootstrap-sweetalert@master/dist/sweetalert.css"> <script src="https://cdn.jsdelivr.net/gh/lipis/bootstrap-sweetalert@master/dist/sweetalert.min.js"></script> <table> <tbody> <tr> <td>{{ $loop->index+1 }}</td> <td>{{ $position->name }}</td> <td>{{ $position->created_at->diffForHumans() }}</a></td> <td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td> <td> <form data-id="delete-form-1" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none"> @csrf @method('DELETE') </form> <a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()"> <i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a> </td> </tr> <tr> <td>{{ $loop->index+1 }}</td> <td>{{ $position->name }}</td> <td>{{ $position->created_at->diffForHumans() }}</a></td> <td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td> <td> <form data-id="delete-form-2" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none"> @csrf @method('DELETE') </form> <a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()"> <i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a> </td> </tr> </tbody> </table>