代码之家 › 专栏 › 技术社区 › danjbh

防止使用sweet alert提交表单时出现默认值

sweetalert2 jquery

danjbh · 技术社区 · 7 年前

在提交带有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>

2 回复 | 直到 7 年前

Limon Monte 7 年前

表单按钮为类型提交,我正处于阻止默认值的阶段,但它不会从确认框中提交:

根据 SweetAlert2 documentation 您可以测试用户是否单击了确认按钮:

.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/sweetalert2@7.1.3/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>

Limon Monte 7 年前

你忘了通过 event 回调的参数:

$('.delete-confirm').on('click', (event) => {
//                                ^^^^^