甜蜜警報繼續提交確認表格

Question

我在提交表單時觸發了這個sweetalert。

$(".swa-confirm").on("submit", function(e) {
        e.preventDefault();
        swal({
            title: $(this).data("swa-title"),
            text: $(this).data("swa-text"),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: $(this).data("swa-btn-txt"),
            closeOnConfirm: false,
            html: false
        }, function() {

        }
        );
    });

但是在單擊確認時，我希望它繼續提交表單...

壞主意浮現在腦海中，例如：

var confirmed = false;
$(".swa-confirm").on("submit", function(e) {
    var $this = $(this);
    if (!confirmed) {
        e.preventDefault();
        swal({
            title: $(this).data("swa-title"),
            text: $(this).data("swa-text"),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: $(this).data("swa-btn-txt"),
            closeOnConfirm: true,
            html: false
        }, function() {
            confirmed = true;
            $this.submit();
        });
    }
});

或將 swa 移動到按鈕單擊而不是提交時，並在提交表單時使用。

但我不喜歡這個解決方案，在我看來它是 frankesteini。 肯定有更好的方法

Answer 1

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

Answer 2

我知道這已經晚了，但將來可能會對某人有所幫助，我已經成功地使用它來提交帶有sweetalert確認的表單。

 $('#form_id').submit(function (e, params) {
        var localParams = params || {};

        if (!localParams.send) {
            e.preventDefault();
        }

           //additional input validations can be done hear

    swal({
                title: "Confirm Entry",
                text: "Are you sure all entries are correct",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#6A9944",
                confirmButtonText: "Confirm",
                cancelButtonText: "Cancel",
                closeOnConfirm: true
            }, function (isConfirm) {
                if (isConfirm) {
                    $(e.currentTarget).trigger(e.type, { 'send': true });
                } else {

              //additional run on cancel  functions can be done hear

            }
        });
});

Answer 3

這是另一個示例，要求用戶通過復選框進行確認。

HTML

<form id="myForm">
    <button type="submit" id="btn-submit">Submit</button>
</form>

JavaScript

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    swal({
        title: 'Confirm',
        input: 'checkbox',
        inputValue: 0,
        inputPlaceholder: ' I agree with the Terms',
        confirmButtonText: 'Continue',
        inputValidator: function (result) {
            return new Promise(function (resolve, reject) {
                if (result) {
                    resolve();
                } else {
                    reject('You need to agree with the Terms');
                }
            })
        }
    }).then(function (result) {
        $('#myForm').submit();
    });
});

Answer 4

我相信這更優雅一點：

$(".swa-confirm").submit(function (e) {
    e.preventDefault();
    swal({
        title: $(this).data("swa-title"),
        text: $(this).data("swa-text"),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#cc3f44",
        confirmButtonText: $(this).data("swa-btn-txt"),
        closeOnConfirm: false,
        html: false
    }, function(){
        $(".swa-confirm").off("submit").submit();
    });
});

Answer 5

功能測試警報（）{

swal(

    {
        title              : "Are you sure?",
        text               : "You want to save?",
        type               : "warning",
        allowEscapeKey     : false,
        allowOutsideClick  : false,
        showCancelButton   : true,
        confirmButtonColor : "#DD6B55",
        confirmButtonText  : "Yes",
        showLoaderOnConfirm: true,
        closeOnConfirm     : false
    }, 

    function (isConfirm) {

        if (isConfirm) {
            profileinfo.submit();
            return true;
        }

        return false;

    }

);

}

Answer 6

var form = $(this).parents('form');   
    swal({
        title: "Are you sure?",
        icon: "warning",
        buttons:[
            'No, cancel it!',
            'Yes, I am sure!'
            ],
            }).then(function(isConfirm){        
                if(isConfirm){ 
                        form.submit();
                } 
});

Answer 7

100% 工作！！

使用屬性做一些小技巧。 在您的表單中添加一個屬性，如在您的表單中的數據標志，將“0”分配為 false。

<form class="swa-confirm" data-flag="0">
    //your inputs
</form>

在你的jQuery中。

$(".swa-confirm").on("click", function(e) {
    $flag = $(this).attr('data-flag');

    if($flag==0){
        e.preventDefault(); //to prevent submitting

        swal({
            title: $(this).data("swa-title"),
            text: $(this).data("swa-text"),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: $(this).data("swa-btn-txt"),
            closeOnConfirm: true,
            html: false
        }, function( confirmed ) {
            if( confirmed ){
                // if confirmed change the data-flag to 1 (as true), to submit
                $('.swa-confirm').attr('data-flag', '1');
                $('.swa-confirm').submit();
            }
        });
    }

    return true;
});

Answer 8

將類 .swa-confirm 應用於輸入提交

$(".swa-confirm").on("click", function(e) {
    e.preventDefault();
    swal({
        title: $(this).data("swa-title"),
        text: $(this).data("swa-text"),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#cc3f44",
        confirmButtonText: $(this).data("swa-btn-txt"),
        closeOnConfirm: true,
        html: false
    }, function( confirmed ) {
        if( confirmed )
            $(this).closest('form').submit();
    });
});

首先防止按鈕事件。 之后，啟動sweetalert，如果“confirmed”為真，則提交#my-form 元素。

抱歉我的英語不好，來自墨西哥的問候，我使用谷歌翻譯：v。

Answer 9

你可以用這個

 $('#deleteamc').on('click',function(e) { event.preventDefault(); var form = this; swal({ title: "Are you sure?", text: "All data related to this AMC ID will be parmanently deleted", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, DELETE it!", cancelButtonText: "No, cancel please!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { form.submit(); } else { swal("Cancelled", "AMC Record is safe :)", "error"); } }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="POST" id="deleteform"> <input type="hidden" name="amccode" id="amccode" value="<?php echo $row['amccode']; ?>"> <button class="btn btn-danger" id="deleteamc" name="delete" type="submit"> <i class="fa fa-minus"></i> Delete </button> </form>

Answer 10

只需更換

您的代碼很好，只需替換$this.submit(); to $( "button[name=submit]" ).trigger('click');

Answer 11

就喜歡這個

 $('.finalpost').click(function (e){ e.preventDefault(); let form = $(this).parents('form'); swal({ title: 'Are you sure?', text: 'Before post please recheck all transaction and your closing balance is correct, As you cannot alter/delete the transaction after post?', icon: 'warning', buttons: ["Make Changes", "Yes!"], }).then(function(value) { if(value){ form.submit(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <input type="submit" value="Post" name="post" class="btn btn-primary finalpost" style="background:#ff5733 !important; color:white !important;">

Answer 12

如果你們想要帶有原生 HTML 表單驗證的 Sweet 警報，請通過以下方式檢查：

$(document).on("click", ".submit", function (e) {
                e.preventDefault();
                var $invoiceForm = $('.form-create');
                if (!$invoiceForm[0].checkValidity()) {
                    $invoiceForm[0].reportValidity()
                } else {
                    swal({
                        title: "Are you sure?",
                        text: "Did you check all the inputs and calculations?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, Submit!",
                    }).then(function (result) {
                        $invoiceForm.submit();
                    });
                }
            });

Answer 13

如果您有多個提交按鈕，這里是Vanilla Javascript版本。 不需要 jQuery 。

<button class="submit" type="submit" 
     data-confirm="Are you sure you want to submit this?" 
     data-icon="warning" 
     data-color="#e55353">
       Submit
</button>

        document.querySelectorAll('.submit').forEach(item => {
            item.addEventListener('click', function(event){
                event.preventDefault();
                let form = this.closest('form');
                Swal.fire({
                    icon: this.getAttribute('data-icon'),
                    text: this.getAttribute('data-confirm'),
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    iconColor: this.getAttribute('data-color'),
                    confirmButtonColor: this.getAttribute('data-color'),
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                })
            })
        });