点击表单提交前确认对话框

Question

我正在使用 Laravel 5.4。我有一个POST 路线：

Route::post('hotel/delete/{slug}', ['as' => 'delete-hotel', 'uses' => 'Backend\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>

但是，我想显示一个确认对话框。从用户点击结果来看，如果用户点击ok，则删除该项目，或者如果用户点击cancel，则不执行任何操作。

感谢您的帮助。谢谢你

Answer 1

我认为你应该使用javascript默认confirm()

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();">

Answer 2

http://bootstrap-confirmation.js.org/

这是一个非常有用的工具！

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

    $('[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');
});

Answer 3

使用 Jquery（可以不用，但由于它被广泛使用...）：

$(document).on("click", '.delete_button',function() {
    var data = $('#delete-form').serialize();
    slug = $(this).attr('href');
    var confirm = confirm("Are you sure ?");
    if (confirm) {
        $.ajax({
            url: slug,
            type: "get",
            data : 'data',
            success : function(data){
                [Do what you want (checkmark, alert, etc ....)]
            }
        });
    event.preventDefault();
    }
});