Cara submit data menggunakan sweet alert

Saya mencoba mengsubmit data yang akan saya kirim namun ketika saya klik tombol submit,itu tidak terjadi apa-apa.
Bagaimana caranya ketika saya klik tombol submit pada sweet alert itu bisa jalan.
Mohon bantuannya kak. Terimakasih.

Tombol Submitnya :

 <button type="submit" class="btn btn-primary float-right mb-2 btn-submit">Kirim</button>

Sweet Alert Js :

<script>
    $('.btn-submit').on('click', function(e) {
        e.preventDefault();
        swal({
            title: 'Apakah Kamu Yakin?',
            text: "Silahkan periksa kembali jawabanmu!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit',
            padding: '2em'
        }).then(function(isConfirm) {
            if (isConfirm) {
                form.submit();
            }
        });
    });
</script>

Screenshot (376).png

javascript

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost: 1 tahun yang lalu

sweetalert yang mana digunakan? 1 ? 2? - @hilmanski
Sweet Alert Versi 2 kak - @HendryScootKennedy

atau respon:

Jawaban Terpilih

Izin bantu jawab yaa, saya asumsikan element/tag form kamu memiliki atribut id dengan nilai "my-form", seperti ini :

<form action="" id="my-form">

Kemudian, coba ubah attribut type di tag button-nya dari "submit" menjadi "button" seperti ini :

<button type="button" class="btn btn-primary float-right mb-2 btn-submit">Kirim</button>

Kenapa harus diubah, karena ketika button type-submit itu di klik, maka form akan otomatis di submit, dan menghiraukan alert-nya, sehingga alertnya bisa jadi muncul sebentar atau bahkan tidak akan muncul sama sekali.

Lalu, script untuk alert + submit form-nya seperti ini :

<script>
    $('.btn-submit').on('click', function() {
        swal({
            title: 'Apakah Kamu Yakin?',
            text: "Silahkan periksa kembali jawabanmu!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit',
            padding: '2em'
        }).then(function(isConfirm) {
            if(isConfirm) {
            	$("#my-form").submit();
            }
        });
    });
</script>

Ohh iya, perlu diperhatikan juga, kamu menggunakan sweetalert versi berapa, seperti yang ditanyakan oleh mas @hilmanski, karena sweetalert v1 dan v2, itu memiliki cara penulisan yang sedikit berbeda.
Silahkan cek di dokumentasi resminya :
- SweetAlert v1 : https://sweetalert.js.org/docs/
- SweetAlert v2 : https://sweetalert2.github.io

Semoga berhasil.

@ahanafi

813 Kontribusi 551 Poin

Dipost: 1 tahun yang lalu

Jawaban

Cek dokumentasinya https://sweetalert2.github.io/

Swal.fire({
  title: 'Do you want to save the changes?',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: 'Save',
  denyButtonText: `Don't save`,
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
  if (result.isConfirmed) {
    Swal.fire('Saved!', '', 'success')
  } else if (result.isDenied) {
    Swal.fire('Changes are not saved', '', 'info')
  }
})

Variable true atau false (hasil dari konfirmasi sweetalert, di dapatkan dari result.isConfirmed

@hilmanski

2552 Kontribusi 2091 Poin

Dipost: 1 tahun yang lalu

kalau pakai cara kakak diatas ,belum sampai klik submit sudah ke submit duluan kak.

Saya tambahkan e.preventDefault kenapa tidak mau submit ya kak?

$('.btn-submit').on('click', function(e) {
        e.preventDefault();
        Swal.fire({
            title: 'Do you want to save the changes?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            denyButtonText: `Don't save`,
        }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                Swal.fire('Saved!', '', 'success')
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info')
            }
        })
    });

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost: 1 tahun yang lalu Update 1 tahun yang lalu

Izin bantu jawab yaa, saya asumsikan element/tag form kamu memiliki atribut id dengan nilai "my-form", seperti ini :

<form action="" id="my-form">

Kemudian, coba ubah attribut type di tag button-nya dari "submit" menjadi "button" seperti ini :

<button type="button" class="btn btn-primary float-right mb-2 btn-submit">Kirim</button>

<script>
    $('.btn-submit').on('click', function() {
        swal({
            title: 'Apakah Kamu Yakin?',
            text: "Silahkan periksa kembali jawabanmu!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit',
            padding: '2em'
        }).then(function(isConfirm) {
            if(isConfirm) {
            	$("#my-form").submit();
            }
        });
    });
</script>

@ahanafi

813 Kontribusi 551 Poin

Dipost: 1 tahun yang lalu

Maaf ijin koreksi sedikit ada kekurangan penambahan method="POST" . Jadi seperti ini <form method="POST" action="" id="my-form"> - @HendryScootKennedy
Iya itu kan cuma sampel aja, terserah mau pake metod Get atau post, tinggal diam disesuaikan - @ahanafi
baik kak sudah - @HendryScootKennedy

Tampikan semua |

Maaf lupa memberi tahu saya menggunakan sweet alert versi 2 kak.

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost: 1 tahun yang lalu

Saya mengikuti cara yang di buatkan oleh kak @ahanafi yaitu Submit post berhasil, namun ketika saya klik tombol cancle dia malah ke submit kak. Begitupun jika saya mencoba klik di luar area sweetalertnya dia malah ke submit sendiri. Itu cara mengakalinya bagaimana ya kak? Mohon bantuannya

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost: 1 tahun yang lalu

Tinggal dilengkapi bagian then-nya seperti yg di mention oleh mas @hilmanski - @ahanafi

Buku ini akan jadi teman perjalanan kamu ngoding! Sudah tersedia versi PDF.

@ahanafi
813 Kontribusi 551 Poin
@Nandar
647 Kontribusi 204 Poin
@dianarifr
642 Kontribusi 316 Poin
@Saputroandhi
509 Kontribusi 162 Poin
@dodipsitorus
412 Kontribusi 145 Poin

Cara submit data menggunakan sweet alert

Jawaban

Pertanyaan Lainnya

Buku Halo Koding!

Top Kontributor