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

У меня это сладкое оповещение срабатывает при отправке формы.

$(".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 на нажатие кнопки вместо отправки и использование при отправке формы.

но мне не нравится это решение, мне оно кажется франкестейни. Наверняка есть лучший способ


person Community    schedule 23.08.2015    source источник


Ответы (10)


Я знаю, что это поздно, но это может помочь кому-то в будущем, я успешно использовал это для отправки форм с подтверждениями 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

            }
        });
});
person Eddy    schedule 01.03.2017

Я считаю, что это немного более элегантно:

$(".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();
    });
});
person Francisco Rangel    schedule 16.08.2016

Вот еще один пример, когда пользователю предлагается подтвердить с помощью флажка.

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();
    });
});
person timgavin    schedule 01.08.2017

функция 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;

    }

);

}

person pradeep    schedule 20.12.2016
comment
‹button id=prty_form_save type=button onclick=return testalert();›SAVE‹/button› тип кнопки должен быть кнопкой (не используйте тип ввода = отправить) - person pradeep; 20.12.2016

Работает на 100%!!

Сделайте небольшой трюк, используя атрибут. В вашей форме добавьте атрибут, такой как data-flag в вашей форме, назначьте «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;
});
person gecko    schedule 13.08.2019

Примените класс .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();
    });
});

Сначала предотвратите событие кнопки. После этого запустите сладкое оповещение и, если «подтверждено» верно, отправьте элемент #my-form.

Извините за мой плохой английский, привет из Мексики, я использовал Google переводчик :v.

person Rafael Cuevas    schedule 04.09.2015
comment
Нет. моя версия лучше. потому что я не жестко кодирую имя формы. - person ; 04.09.2015
comment
Я внес изменения, как вы думаете? - person Rafael Cuevas; 04.09.2015
comment
хорошо, спасибо, но концепция не сильно изменилась по сравнению с моей версией? Я искал что-то короткое и сладкое. - person ; 04.09.2015
comment
Хорошо, я надеюсь, вы найдете что-то более удобное и милое. Sweet alert выглядит хорошо, но пользоваться им по-прежнему немного некрасиво. - person Rafael Cuevas; 05.09.2015
comment
Вы должны сделать это с помощью отправки, а не щелчка, потому что большинство браузеров прямо сейчас будут выполнять проверку в начале, и это будет намного лучше для ваших пользователей. - person Marek Szmalc; 14.03.2018

Вы можете использовать это

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

person Samiran    schedule 03.11.2019

Просто заменить

Ваш код в порядке, просто замените $this.submit(); на $( "button[name=submit]" ).trigger('click');

person Shayan Shaikh    schedule 28.06.2020

Просто сделайте это

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

person Tarik Manoar    schedule 09.01.2021

person    schedule
comment
Я думаю, вам не хватает закрывающей точки с запятой; а в остальном мне нравится твой ответ ;) - person CoalaWeb; 03.06.2016
comment
Это не будет выполнять никаких проверок формы, хотя - person Abhijeet; 18.12.2016