Предотвратить отправку формы по умолчанию с помощью сладкого предупреждения

Я пытаюсь добавить последнюю проверку перед отправкой формы с окном подтверждения SweetAlert 2.

Кнопка формы - это тип отправки, я нахожусь на этапе, когда я предотвратил значение по умолчанию, но он не отправляется из окна подтверждения:

ОБНОВЛЕНИЕ

$('#btn-submit').on('click', function(e){
    e.preventDefault();
  swal({   
    title: "Are you sure?",
    text: "You will not be able to recover this lorem ipsum!",         type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!", 
    closeOnConfirm: false 
  }, 
    function(){   
    $("#form-loader").submit();
  });
})

Проблема, с которой я столкнулся сейчас, заключается в том, что кнопка удаления просто закрывает предупреждение и возвращается к предыдущему экрану без отправки.

<form method="POST" action="#" accept-charset="UTF-8" id="form-loader"><input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="Yl8jdQ8dzxPmbxMcdF7coS9bSxXsChXU2g1YHEq0">
<input class="delete-confirm" id="btn-submit" type="submit" value="Delete">
</form>

jquery sweetalert2
person danjbh    schedule 27.12.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Кнопка формы - это тип отправки, я нахожусь на этапе, когда я предотвратил значение по умолчанию, но он не отправляется из окна подтверждения:

Согласно документации SweetAlert2, вы можете проверить, нажал ли пользователь кнопку подтверждения:

.then((result) => {
    if (result.value) { // if confirm clicked....
       $('.delete-confirm').closest('form').submit(); // submit form
    }
})


$('.delete-confirm').on('click', (event) => {
    event.preventDefault()
    swal({
        title: 'Confirm',
        text: 'Are you sure to delete this instance?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.value) {
            $('.delete-confirm').closest('form').submit();
        }
    });
});
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>


<form>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th></th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
    </table>
</form>

person gaetanoM    schedule 27.12.2017

arrow_upward
3
arrow_downward

Вы забыли передать обратному вызову параметр event:

$('.delete-confirm').on('click', (event) => {
//                                ^^^^^
person Limon Monte    schedule 27.12.2017
comment
Спасибо, что указали на это - по какой-то причине окно просто закрывается и просто возвращается на страницу без отправки? Любые идеи? - person danjbh; 27.12.2017
comment
Я смогу ответить, если вы приложите к вопросу HTML-часть своего кода. - person Limon Monte; 27.12.2017
comment
Я только что обновил свой вопрос, я использую формы Laravel, поэтому показывать его немного сложнее, но html минимален, я получу его из источника. - person danjbh; 27.12.2017