Mencegah submit form berulang kali dengan jQuery | sebuah aplikasi web pasti memerlukan form untuk mengirimkan data (submit) untuk di proses lebih lanjut, baik untuk disimpan ke database atau hanya sebagai data variabel pada kode website yang dibuat.

Terkadang pengguna melakukan kesalahan ketika mengirim form dengan mengirim data yang sama lebih dari sekali, penyebabnya bermacam-macam, ada yang karena tidak sengaja, ada yang dengan sengaja, bisa juga karena koneksi internet yang terputus ketika sedeng mengirim form dan lain sebagainya.

Sedangkan aplikasi hanya memerlukan sekali pengiriman paket data saja dari form tersebut.

submit form dua kali

Untuk mengatasi masalah tersebut, perlu dibuat cara agar form hanya akan dikirim satu kali saja, tidak berulang kali. Ada banyak cara yang bisa dilakukan, misalnya jika menggunakan PHP bisa dengan mengatur durasi waktu pengiriman dari sebuah IP address, atau dengan memanfaatkan session.

Atau bisa juga dengan memanfaatkan jquery, yaitu dengan menghilangkan atau menonaktifkan tombol submit ketika sudah di klik agar pengguna hanya bisa mengirim data satu kali saja.

Pada tutorial kali ini kita akan coba mencegah user untuk mengirim data dua kali dengan bantuan jQuery, namun sedikit menggunakan PHP sebagai pelengkap karena pengiriman data menggunakan ajax, begini caranya.

Buat form html untuk mengisi data

Berikut ini bentuk form html yang akan dikirimkan menggunakan jQuery ajax.

<form id="jw-frm" method="post">
  <div class="input-group">Judul <span class="judul-validation validation-error"></span></div>
  <div>
    <input type="text" name="judul" id="judul" class="input-control" />
  </div>

  <div class="input-group">Konten </div>
  <div>
    <textarea rows="5" name="konten" id="konten" class="input-control"></textarea>
  </div>

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

Ketika tombol submit di klik, akan melakukan pengecekan apakah data yang dikirim kosong atau tidak, jika kosong maka tampilan pesan, jika tidak kosong maka script jQuery akan mengirimkan data ke halaman PHP via Ajax.
Selama melakukan proses pengiriman, tombol submit akan disembunyikan dan diganti dengan menampilkan pemberitahuan bahwa form sedang dikirim, ditandai juga dengan sebuah tampilan loading. Setelah form terkirim maka akan ditampilkan lagi pemberitahuan bahwa data sudah berhasil dikirim, sedangkan tombol tidak dimunculkan kembali agar pengguna tidak bisa mengirim data lagi, kecuali jika dia reload halaman web.

Berikut script nya

function ajaxSend() { 
  var valid = true;
  valid = checkEmpty($("#judul"));
  if(valid) {
    var judul = $("#judul").val();
    var konten = $("#konten").val();
    $.ajax({
      url: "process-ajax.php",
      data:'judul='+judul+'&konten='+konten,
      type: "POST",
      beforeSend: function(){
        $('#submit-control').html("<img src='loading.gif' /> Data sedang dikirim...");
      },
      success: function(data){
        $('#submit-control').html("Data sudah terkirim");
      }
    });
  }
}

function checkEmpty(obj) {
  var name = $(obj).attr("name");
  $("."+name+"-validation").html(""); 
  $(obj).css("border","");
  if($(obj).val() == "") {
    $(obj).css("border","#FF0000 1px solid");
    $("."+name+"-validation").html("Harus diisi");
    return false;
  } 
  return true;  
}

Demo | Download

Dengan trik seperti itu maka ketika tombol submit di klik, maka seketika tombol tidak akan terlihat lagi, sehingga user tidak akan bisa mengirim data berulang kali.

Selamat mencoba..