Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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
Tanggapan
sweetalert yang mana digunakan? 1 ? 2?
Sweet Alert Versi 2 kak
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>
<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>
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>
Tanggapan
Maaf ijin koreksi sedikit ada kekurangan penambahan method="POST" . Jadi seperti ini <form method="POST" action="" id="my-form">
Iya itu kan cuma sampel aja, terserah mau pake metod Get atau post, tinggal diam disesuaikan
baik kak sudah
Terimakasih kak
<div>Maaf lupa memberi tahu saya menggunakan sweet alert versi 2 kak. </div>
<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>
Tanggapan
Tinggal dilengkapi bagian then-nya seperti yg di mention oleh mas @hilmanski