Postingan lainnya

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

Diperbarui 2 tahun yang lalu

Tanggapan

sweetalert yang mana digunakan? 1 ? 2?

@hilmanski

Sweet Alert Versi 2 kak

@HendryScootKennedy

5 Jawaban:

<div>Cek dokumentasinya <a href="https://sweetalert2.github.io/">https://sweetalert2.github.io/</a></div><pre>Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, confirmButtonText: 'Save', denyButtonText: Don't save, }).then((result) => { <em>/* Read more about isConfirmed, isDenied below */</em> if (result.isConfirmed) { Swal.fire('Saved!', '', 'success') } else if (result.isDenied) { Swal.fire('Changes are not saved', '', 'info') } })</pre><div><br>Variable true atau false (hasil dari konfirmasi sweetalert, di dapatkan dari result.isConfirmed</div>

@hilmanski

2670 Kontribusi 2132 Poin

Dipost 2 tahun yang lalu

<div><br>kalau pakai cara kakak diatas ,belum sampai klik submit sudah ke submit duluan kak.<br><br>Saya tambahkan e.preventDefault kenapa tidak mau submit ya kak?</div><pre>$('.btn-submit').on('click', <strong>function(</strong><em>e</em><strong>) {</strong> <strong> e.preventDefault();</strong> <strong> Swal.fire({</strong> <strong> title: 'Do you want to save the changes?',</strong> <strong> showDenyButton: true,</strong> <strong> showCancelButton: true,</strong> <strong> confirmButtonText: 'Save',</strong> <strong> denyButtonText: Don't save,</strong> <strong> }).then((</strong><em>result</em><strong>) => {</strong> <strong> </strong><em>/* Read more about isConfirmed, isDenied below */</em> <strong> if (result.isConfirmed) {</strong> <strong> Swal.fire('Saved!', '', 'success')</strong> <strong> } else if (result.isDenied) {</strong> <strong> Swal.fire('Changes are not saved', '', 'info')</strong> <strong> }</strong> <strong> })</strong> <strong> }</strong>);</pre>

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost 2 tahun yang lalu

Jawaban Terpilih

<div>Izin bantu jawab yaa, saya asumsikan element/tag form kamu memiliki atribut id dengan nilai "my-form", seperti ini :</div><pre><form action="" id="my-form"></pre><div><br>Kemudian, coba ubah attribut type di tag button-nya dari "submit" menjadi "button" seperti ini :</div><pre><button type="button" class="btn btn-primary float-right mb-2 btn-submit">Kirim</button></pre><div><br>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.<br><br>Lalu, script untuk alert + submit form-nya seperti ini :</div><pre><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></pre><div><br>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.<br>Silahkan cek di dokumentasi resminya :<br>- SweetAlert v1 : <a href="https://sweetalert.js.org/docs/">https://sweetalert.js.org/docs/</a><br>- SweetAlert v2 : <a href="https://sweetalert2.github.io">https://sweetalert2.github.io</a><br><br>Semoga berhasil.</div>

@ahanafi

815 Kontribusi 552 Poin

Dipost 2 tahun yang lalu

Tanggapan

Maaf ijin koreksi sedikit ada kekurangan penambahan method="POST" . Jadi seperti ini

@HendryScootKennedy

Iya itu kan cuma sampel aja, terserah mau pake metod Get atau post, tinggal diam disesuaikan

@ahanafi

baik kak sudah

@HendryScootKennedy

Terimakasih kak

@HendryScootKennedy

<div>Maaf lupa memberi tahu saya menggunakan sweet alert versi 2 kak. </div>

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost 2 tahun yang lalu

<div>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</div>

@HendryScootKennedy

19 Kontribusi 0 Poin

Dipost 2 tahun yang lalu

Tanggapan

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

@ahanafi