Как продолжить отправку формы после предотвращения ее с помощью jQuery?

Как продолжить отправку формы после предотвращения ее с помощью jQuery?

Например：
Существует удаление элемента input:

<form action="/articles/{{ $article->id }}" method="POST">
    {{ method_field('DELETE') }}
    {{ csrf_field() }}
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete">
</form>

Я хочу дать пользователям предупреждение sweetalert2 перед отправкой формы.

Javascript code:

<script>
    $('.need-alert').on('click', function (event) {

        event.preventDefault();

        //sweetalert2 code
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function () {

             //...

        }).catch(swal.noop);
    })
</script>

Окно предупреждения sweetalert2 могло отображаться правильно.

Вопрос：
Как продолжить отправку формы после нажатия окна предупреждения sweetalert2 кнопка подтверждения?


jquery laravel-5 sweetalert2
person zwl1619    schedule 14.05.2017    source источник
comment
Дайте вашей форме идентификатор, затем выполните $(#formId).submit ()   -  person M. Gara    schedule 14.05.2017
comment
После нажатия кнопки подтверждения окна предупреждения запустите $(#form).submit();   -  person Akshay Chawla    schedule 14.05.2017
comment
@М. Гара и Акшай Чавла, это не работает.   -  person zwl1619    schedule 14.05.2017
comment
Просто попробуйте вернуть true; вместо $(#form).submit();   -  person Sagar Jajoriya    schedule 14.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью функции отправки jQuery.

<form id="deleteForm" action="/articles/{{ $article->id }}" method="POST">
    {{ method_field('DELETE') }}
    {{ csrf_field() }}
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete">
</form>

<script>
    $('.need-alert').on('click', function (event) {

        event.preventDefault();

        //sweetalert2 code
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function () {
            $('#deleteForm').submit();
        }).catch(swal.noop);
    })
</script>

Еще лучше обрабатывать событие отправки, а не нажатие кнопки удаления. Если пользователь переходит к кнопке с помощью клавиатуры, подтверждение не отображается. Вы можете исправить это, выполнив:

$(document).ready(function () {
        var form = $("#deleteForm");
        // keep track of the swall popup answer.
        var isConfirmed = false;

        form.submit(function (event) {
            // If answered "ok" previously continue submitting the form. 
            if (isConfirmed) {
                return true;
            }

            // Confirm is not ok yet so prevent the form from submitting and show the message.
            event.preventDefault();

            //sweetalert2 code
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then(function (confirmed) {
                isConfirmed = confirmed;
                form.submit();
            }).catch(swal.noop);
        });
    });
<link href="https://cdn.jsdelivr.net/sweetalert2/4.0.5/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.0.10/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="deleteForm" action="/articles/{{ $article->id }}" method="POST">
    <!-- {{ method_field('DELETE') }}
    {{ csrf_field() }} -->
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="delete">
</form>

person Mike Bovenlander    schedule 14.05.2017
comment
Я пытаюсь, но это не работает. Похоже, что код в функции обратного вызова не работает. - person zwl1619; 15.05.2017
comment
@ zwl1619 Я изменил код и добавил фрагмент. Это работает. Но я не уверен, что это лучшее решение. (Я прокомментировал поле csrf, чтобы фрагмент работал.) - person Mike Bovenlander; 15.05.2017