Form'a SweetAlert onayı ekleme

18-05-2023, 03:34:48

Merhaba,

Statik bir sayfada basit bir form bulunduruyoruz. Form'a gönderilmeden önce SweetAlert ile kullanıcı onayı almak istiyoruz.
Normalde aşağıdaki bileşen ile onay alıyoruz fakat bu artık günümüzde standart kaçtığı için Swal.fire mantığına geçirmeye çalışıyorum.

onclick="return confirm('{$lang.manualrenew_confirm}');"

Form kodları:

<form action="" method="post" id="form2">
                                                        <input type="hidden" name="make" value="issueinvoice"/>
                                                        <div class="text-gray-500 fw-semibold fs-5 mb-5">Title</div>
                                                        <div class="mb-10">
                                                             <input type="submit" class="btn btn-light-primary" value="Submit" onclick="return confirm('Do you want submit?');">
                                                        </div>
</form>

Örnek SweetAlert JS kodu (bu çalışıyor fakat onaya tıklansa da tıklanmasa da formu gönderiyor - sadece onaylanırsa form gönderilsin istiyoruz.)

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

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

    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 {

            }
        });
});

18-05-2023, 04:01:11

AliFurkan

Aşağıdakini dener misin?

<!DOCTYPE html>
<html>
  <head>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  </head>
  <body>
    <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 action="/gonder.php" method="post" data-flag="0">
      <input type="hidden" name="make" value="issueinvoice" />
      <div class="text-gray-500 fw-semibold fs-5 mb-5">Title</div>
      <div class="mb-10">
        <input id="submit" type="submit" class="btn btn-light-primary" value="Submit" />
      </div>
    </form>
    <script type="text/javascript">
      $("#submit").on("click", function (e) {
        event.preventDefault();
        var form = this;

        swal(
          {
            title: "Emin misiniz?",
            text: "Bilgileri doğru girdiğinizi onaylayıp işleme devam ediyor musunuz?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Evet",
            cancelButtonText: "Hayır",
            closeOnConfirm: false,
            closeOnCancel: false,
          },
          function (isConfirm) {
            if (isConfirm) {
              $(e.currentTarget).trigger(e.type, { send: true });
            } else {
              swal("Vazgeçildi", "İşlemi iptal ettiniz", "error");
            }
          }
        );
      });
    </script>
  </body>
</html>

18-05-2023, 04:09:12

SunucuCenter

AliFurkan adlı üyeden alıntı: mesajı görüntüle

Aşağıdakini dener misin?

<!DOCTYPE html>
<html>
  <head>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  </head>
  <body>
    <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 action="/gonder.php" method="post" data-flag="0">
      <input type="hidden" name="make" value="issueinvoice" />
      <div class="text-gray-500 fw-semibold fs-5 mb-5">Title</div>
      <div class="mb-10">
        <input id="submit" type="submit" class="btn btn-light-primary" value="Submit" />
      </div>
    </form>
    <script type="text/javascript">
      $("#submit").on("click", function (e) {
        event.preventDefault();
        var form = this;

        swal(
          {
            title: "Emin misiniz?",
            text: "Bilgileri doğru girdiğinizi onaylayıp işleme devam ediyor musunuz?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Evet",
            cancelButtonText: "Hayır",
            closeOnConfirm: false,
            closeOnCancel: false,
          },
          function (isConfirm) {
            if (isConfirm) {
              $(e.currentTarget).trigger(e.type, { send: true });
            } else {
              swal("Vazgeçildi", "İşlemi iptal ettiniz", "error");
            }
          }
        );
      });
    </script>
  </body>
</html>

Bu da çalışmadı maalesef, en sonunda aşağıda bir deneme yanılmayla yaptığım çalıştı gibi.

<script>
$('#btn-submit').on('click',function(e){
            e.preventDefault();
            var form = $(this).parents('form');

            if (confirm) {
                Swal.fire({
                    html: `<span class="badge badge-primary">confirm?</span>`,
                    icon: "warning",
                    buttonsStyling: false,
                    confirmButtonText: "Confirm",
                    showCancelButton: true,
                    customClass: {
                        confirmButton: "btn btn-primary",
                        cancelButton: "btn btn-danger"
                    }
                }).then(function (result) {
                    if (result.isConfirmed) { 
                        $('#frm_input_srt').submit();
                    }
                });
            } else {
            }            
        }); 
</script>

18-05-2023, 05:56:54

iyovi

@SunucuCenter; Aşağıda sana belirteceğim adımları birebir uygularsan gayet sağlıklı sonuç alacaksın lakin projenden öncelikle kendi sweetAlert modülünü kaldırman gerekiyor aksi halde versiyon çakışması yaşarsın.

1- Buradaki CSS kodunu projene link olarak değil copy-paste yaparak projene dahil et.
2- Buradaki JS kodunu projene link olarak değil copy-paste yaparak projene dahil et.

function fonksiyon_adi(e) {
    event.preventDefault();
    var deger = $.trim($(e).val());
    swal({
        title: deger + " ekranda gösterilecek mesaj.",
        type: "warning",
        html: "ekrana_yazdirilacak_mesaj<br>" + '<input type="checkbox" name="onay_kutu" id="onay_kutu" class="form-control">',
        showCancelButton: true,
        confirmButtonColor: "#449D44",
        cancelButtonColor: "#d33",
        confirmButtonText: "Evet",
        cancelButtonText: "Hayır",
    }).then((result) => {
        if (result.value) {
            swal({
                title: "Lütfen Bekleyin.",
                text: "İşleminiz gerçekleştiriliyor..",
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                onOpen: () => {
                    swal.showLoading();
                },
            });
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: post_edilecek_url,
                data: { data_verileri },
                success: function (response) {
                    swal.close();
                    if (response.sonuc == true) {
                        swal("BAŞARILI!", response.msg, "success").then((result) => {
                            if (result.value) {
                                location.reload();
                            }
                        });
                    } else {
                        swal("HATA!", response.msg, "error");
                    }
                },
            });
        }
    });
}

Buradaki fonksiyonu ilgili alanları kendine göre doldurarak kontrol sağlayabilirsin. Lakin Ajax'a veri döndürürken JSON formatta döndürmen gerekiyor ona göre ve PHP tarafta sonuc=true ve msg="test" bu şekilde veri döndürürsen direk otomatik fonksiyon kendisi çalışacaktır zaten.

18-05-2023, 12:01:11

freguencey

Aşşağıdaki kod bloguna uygun halde test edermisin

  Swal.fire({
  title: 'Eminmisiniz?',
  text: "Bu işlem geri alınamaz! Eğer birden fazla ürün var ise onlarda iptal edilecek.",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: "Onaylıyorum",
  cancelButtonText: "Vazgeç",
}).then(function(isConfirm) {
  if (isConfirm.value) {
        $.ajax({
        url: ajax_url + "/ajax.php?action=islemDurumStatusChange",
        type: "POST",
        data: t,
        dataType: "json",
        cache: !1,
        success: function(t, e, a) {
                if(t["status"]==false) {
                    swalFire(t["ttype"],t["messageTitle"],t["messageMessage"]);
                } else {
                toastr.success('Siparişe ait ürünler tedarik edilememe sebebiyle reddedildi.', 'İşlem başarılı');
                setTimeout(window.location.href = t["RedirectURL"],2500);
                }

          }

    })
  }
})

18-05-2023, 13:37:52

mehmetkul

Bunu bir kontrol eder misin şayet çalışır ise düzenlemenizi buna göre yapmalısınız bazen sweetalert çalışmamasının sebeni kütüphaneleri head etiketi içine almamaktan kaynaklanabiliyor bu durumda<head>kütüphaneler</head> içerisine almanız gerekebilir.

<form action="" method="post" id="form2">
    <input type="hidden" name="make" value="issueinvoice"/>
    <div class="text-gray-500 fw-semibold fs-5 mb-5">Title</div>
    <div class="mb-10">
        <input type="submit" class="btn btn-light-primary" value="Submit">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    $('#form2').submit(function(e) {
        e.preventDefault(); // Formun varsayılan davranışını iptal ediyoruz.

        swal({
            title: "Confirm Entry",
            text: "Are you sure all entries are correct?",
            icon: "warning",
            buttons: ["Cancel", "Confirm"],
            dangerMode: true
        }).then(function (isConfirm) {
            if (isConfirm) {
                $('#form2').off('submit'); // Tekrarlı tetiklemeleri önlemek için submit olayını kaldırıyoruz
                $('#form2').submit(); // Formu gönderiyoruz
            }
        });
    });
</script>