Ajax auto submit form dalam beberapa detik
Tahukah kamu terkadang kita pernah menyediakan teks editor kepada pengguna online, salah satu contohnya teks editor Blogger. Auto submit form ini menggunakan ajax dari JQuery, cara kerjanya yakni dengan menghitung waktu setiap interval beberapa menit maka dia akan menjalankan fungsi ajax submit form. Dengan adanya auto submit pengguna tidak akan kehilangan data ketika menulis panjang x lebar dalam teks editor.
Kelemahan dari Auto Submit form dibawah ini dia akan memakan bandwith hosting yang besar, sebab sama saja dengan mengirim data bertubi-tubi setelah interval waktu. Pastikan kamu mempunyai webhosting unlimited agar tidak terkena suspended ketika menggunakan JavaScript Auto Refresh dibawah ini.
Dokumen Halaman
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Ajax Auto Refresh Demo</title>
<script src='https://cdn.jsdelivr.net/gh/jquery/jquery@1.11.3/dist/jquery.min.js'/>
</head><body></html>
<form id="RyanForm">
<input type="text" name="nama" placeholder="Masukan Nama Kamu">
<input type="submit" value="simpan">
</form>
<script>
//Tombol submit tanpa refresh
$(function () {
$("#RyanForm").on("submit", function (e) {
$("#status").html("Sedang menyimpan...");
e.preventDefault();
$.ajax({
type: "post",
url: "edit.php?kasus=simpan",
data: $("#RyanForm").serialize(),
success: function (data) {
$("#status").html(data);
}
});
});
});
//Submit Otomatis setiap 5 detik @5000mdetik
setInterval(function() {
$("#status").html(" ");
$.ajax({
type: "post",
url: "edit.php?kasus=simpan",
data: $("#RyanForm").serialize(),
success: function (data) {
}
});
}, 5000); </script>
</html></body>
Prinsip kerja kedua baris kode Ajax
Baris pertama adalah kode untuk menghandle tombol submit dengan menggunakan fungsi on(submit()) kita bisa melakukan aksi si latar belakang untuk nengirim data tanpa harus merefresh halaman. Kemudian baris paragraf kedua adalah pewaktu setInterval, pewaktu ini akan terus menjalankan kode dibagian atas. Kode atasnya adalah ajax pengiriman data, sehingga proses bisa dilakukan 2x. Form akan otomatis tersubmit tanpa harus menekan tombol submit.Kelemahan penggunaan ajax diatas yakni kita tidak bisa membiarkan form terus terbuka, karena halaman tersebut selalu mengirim data dalam interval 5 detik. Hal ini tentunya bisa mengurangi kapasitas bandwidh hosting yang kita miliki.
Kamu bisa mencobanya sendiri di Localhost, semuanya berjalan dengan baik. Fungsi dari $("#status").html(data) adalah untuk menyematkan hasil respon ke dalam tag div hasil.
Post a Comment for "Ajax auto submit form dalam beberapa detik"
Post a Comment
Komentar sesuai isi topik. Gunakan kalimat yang sopan, dilarang spam link.^_^