使用数据属性提交表单

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>