使用数据属性提交表单

Posted 2023-05-08

【中文标题】使用数据属性提交表单

【英文标题】：Form submission using data attributes

【发布时间】：2019-06-20 07:16:24

【问题描述】：

请我想删除基于其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");
        
    );
);

【参考方案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>

【讨论】：

您的表单将数据发布到该地址的服务器。如果您收到 405 错误，您需要在服务器端进行调查。现在你的问题解决了吗？你得到当前的记录ID吗？