Cara Mencegah Form Submit Terkirim Dua kali dengan jQuery

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Mencegah Form Submit Terkirim Dua kali dengan jQuery. Dalam tutorial ini, kita akan melihat cara menghindari pengiriman duplikat menggunakan jQuery. Saat mengirimkan form melalui fungsi AJAX, halaman tidak akan di-refresh. Jadi, user interface tidak akan menunjukkan kemajuan apa pun tentang eksekusi sisi server yang terjadi. Ini akan menyebabkan duplikat formulir untuk dikirim. Untuk mengatasi masalah ini, kami menghindari pengiriman ganda menggunakan jQuery.

Mari kita lihat ini dengan sebuah contoh. Dalam contoh ini, saya memiliki form HTML dan diposkan melalui AJAX. Saat memproses form kirim tindakan di sisi server, tombol kirim akan disembunyikan untuk mencegah beberapa duplikat submit.

jQuery Function untuk Mencegah Multiple Submit

Berikut form HTML yang akan dikirimkan melalui jQuery AJAX

<form id="frm" method="post">
   <div class="input-group">Title <span class="title-validation validation-error"></span></div>
   <div>
        <input type="text" name="title" id="title" class="input-control" />
   </div>
    
   <div class="input-group">Description </div>
   <div>
		<textarea rows="5" name="description" id="description" class="input-control"></textarea>
   </div>

   <div id="submit-control">
        <input type="button" name="btn-submit" id="btn-submit" value="submit" onClick="ajaxSubmit();"/>
    </div>
</form>

Pada saat mengklik tombol submit, skrip jQuery ini mengirimkan data form ke halaman PHP melalui AJAX. Saat memproses permintaan AJAX ini, ia menyembunyikan tombol submit dan menggantinya dengan menampilkan pesan pemberitahuan perkembangan dengan loader.

function ajaxSubmit() {	
	var valid = true;
	valid = checkEmpty($("#title"));
	if(valid) {
		var title = $("#title").val();
		var description = $("#description").val();
		$.ajax({
			url: "process-ajax.php",
			data:'title='+title+'&description='+description,
			type: "POST",
			beforeSend: function(){
				$('#submit-control').html("<img src='LoaderIcon.gif' /> Ajax Request is Processing!");
			},
			success: function(data){
				setInterval(function(){ $('#submit-control').html("Form submited Successfully!") },1000);
			}
		});
	}
}

Berikut ini contoh gambar form HTML

Oke itulah tadi pemabahasan saya tentang Cara Mencegah Form Submit Terkirim Dua kali dengan jQuery, semoga bermanfaat.