Jquery 单击“表单提交”之前的“确认”对话框

我正在与Laravel 5.4合作。我有一个

POST

路线：

Route:：post（'hotel/delete/{slug}'，['as'=>'delete hotel'，'uses'=>'后端\HotelController@postDelete']);

在索引页面中，我有一个带有表单提交的锚标记。当前，单击锚定标记时，将提交一个隐藏表单

<a href="{{ route('delete-hotel', $hotel->slug) }}" class="btn btn-operation btn-danger" 
    onclick="event.preventDefault(); 
    document.getElementById('delete-form').submit();"> 
    <i class="fa fa-close"></i> Delete</a> 

<form id="delete-form" action="{{ route('delete-hotel', $hotel->slug) }}" 
    method="post" style="display: none;">
    {{ csrf_field() }}
</form>


{{csrf_field（）}}

但是，我想显示一个确认对话框。从用户单击结果中，如果用户单击“确定”

，则删除该项目；如果用户单击“取消”，则不执行任何操作

谢谢你的帮助。谢谢

这是一个非常有用的工具

将下面的代码放入准备好的文档中

    $('[id$="btnDoSomethingDrastic"]').click(function (event) {
    //So when a user clicks the DoSomethingDrastic button....

    event.preventDefault();
    // If one already exists then destroy it
    $(this).confirmation('destroy');

    // Create a new confirmation...
    $(this).confirmation({
        rootSelector: '[data-toggle=confirmation]',
        placement: 'bottom',
        title: 'Action Selected Changes',
        btnOkLabel: 'Action now',
        btnOkIcon: 'glyphicon glyphicon-share-alt',
        btnOkClass: 'btn-success',
        btnCancelLabel: 'Cancel',
        btnCancelIcon: 'glyphicon glyphicon-ban-circle',
        btnCancelClass: 'btn-danger',
        content: 'Are you sure you want to continue:<br><br>This will do something drastic!!!<br><strong>Are you sure you want to do this?</strong>',
        html: true,
        popout: true,

        container: 'body',
        onConfirm: function () {
            //The user confirmed they wanted to do something drastic
            actionGoAndDoSomethingDrastic();
        }
    });

    // ... and show it.
    $(this).confirmation('show');
});

$（'[id$=“btnDoSomethingDrastic”]'）。单击（函数（事件）{
//因此，当用户单击DoSomethingDrastic按钮时。。。。
event.preventDefault（）；
//如果一个已经存在，那么销毁它
美元。确认书（“销毁”）；
//创建一个新的确认。。。
美元。确认({
根选择器：“[data toggle=确认]”，
位置：'底部'，
标题：“所选更改的操作”，
btnOkLabel:“立即行动”，
btnOkIcon:'glyphicon glyphicon share alt'，
btnOkClass:“btn成功”，
btnCancelLabel:“取消”，
btnCancelIcon:“glyphicon glyphicon禁止圆”，
btn取消类：“btn危险”，
内容：“您确定要继续吗：

这将做一些激烈的事情！！！
您确定要继续吗？”，
是的，
是的，
容器：'主体'，
onConfirm:函数（）{
//用户确认他们想做一些激烈的事情
actionGoAndDoSomethingDrastic（）；
}
});
//…并展示它。
$（本）。确认（“显示”）；
});

使用Jquery（可以不使用，但由于广泛使用…）

---

我认为您应该使用javascript默认值

HTML部分

<a href="{{ route('delete-hotel', $hotel->slug) }}" class="btn btn-operation btn-danger" onclick="return confirmation();"> 

function confirmation(){
    if(confirm('are you sure?')){
        document.getElementById('delete-form').submit();
    }else{
        return false;
    }   
}

希望它能帮助你

更新

在提交表单之前，您可能正在重定向到

href

url。所以，建立你的链接

<a href="javascript:void(0)" class="btn btn-operation btn-danger" onclick="return confirmation();">

请您解释一下

如果您只想点击获取路线，您不必使用表单

尽管如此，我没有读到您的代码，您发送的表单似乎带有链接。我编辑了我的答案，如果你愿意，你可以自己写一些东西。那太棒了，但需要一些时间和努力。我会列在待办事项清单上。谢谢你的回答。这将显示一个确认对话框，并根据该事件提交表单。但是，表单是使用

GET方法提交的。有什么想法吗？将属性method=“POST”添加到formmethod已经定义为POST，但实际上并没有触发它@Sanchit尝试删除指向
href
标记的url，使其
href=“javascript:void（0）”
用于测试。让我更新我的回答，欢迎@vijayrana！快乐编码：）
<a href="javascript:void(0)" class="btn btn-operation btn-danger" onclick="return confirmation();">