it-swarm.com.de

süßer Alarm weiter Formular absenden bei Bestätigung

Ich habe diesen Sweetalert beim Abschicken eines Formulars ausgelöst.

$(".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() {

        }
        );
    });

aber wenn Sie bestätigen, möchte ich, dass das Formular weiter gesendet wird ...

Mir fallen schlechte Ideen ein wie:

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

oder bewegen Sie den Schalter zum Klicken und nicht zum Senden und zum Senden eines Formulars.

aber ich mag diese lösung nicht, sie scheint mir ehrlich zu sein. Sicher gibt es einen besseren Weg

11
user796443
$('#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();
    });
});
26
Omar Makled

Ich weiß, dass dies zu spät ist, aber es könnte in der Zukunft jemandem helfen. Ich habe dies mit Erfolg zum Senden von Formularen mit Bestätigungsnachrichten verwendet.

 $('#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

            }
        });
});
4
Eddy

Ich glaube, das ist etwas eleganter:

$(".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();
    });
});
2

funktion testalert () {

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;

    }

);

}

2
pradeep

Hier ist ein weiteres Beispiel, in dem der Benutzer aufgefordert wird, das Kontrollkästchen zu bestätigen.

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();
    });
});
1
timgavin

Wenden Sie die Klasse .swa-confirm auf die Eingabe an

$(".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();
    });
});

Verhindern Sie zuerst das Schaltflächenereignis. Starten Sie danach den Sweetalert und wenn "bestätigt" wahr ist, übergeben Sie das # my-form Element.

Entschuldigung für mein schlechtes Englisch, Grüße aus Mexiko, ich habe Google translate verwendet: v.

0
Rafael Cuevas
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();
                } 
});
0
Aries

100% arbeiten !!

Machen Sie einen kleinen Trick mit Attribut. Fügen Sie in Ihrem Formular ein Attribut wie data-flag hinzu, und weisen Sie "0" als false zu.

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

In deiner Frage.

$(".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;
});
0
gecko