диалог подтверждения перед отправкой формы по щелчку мыши

Question

диалог подтверждения перед отправкой формы по щелчку мыши

Я работаю с Laravel 5.4. У меня есть POST маршрут:

Route::post('hotel/delete/{slug}', ['as' => 'delete-hotel', 'uses' => 'BackendHotelController@postDelete']);

На странице индекса у меня есть тег привязки с формой submit. В настоящее время при нажатии на метку привязки отправляется скрытая форма.

<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, никаких действий не предпринимается.

Помощь ценится. Спасибо

675 3

jQuery laravel onclick

3 ответов:

Comments

Ничего не найдено.

Sanchit Gupta · Accepted Answer · 2017-05-04 18:13:25

Я думаю, что вы должны использовать 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();">

Rob Branaghan · Accepted Answer · 2017-05-04 11:08:29

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

Mathieu Ferre · Accepted Answer · 2017-05-04 11:37:01

С помощью 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();
    }
});