Kirim Formulir Tanpa Refresh Halaman Menggunakan jQuery, Cara terbaik untuk meningkatkan pengalaman pengguna situs web Anda adalah dengan memvalidasi dan mengirimkan formulir tanpa penyegaran halaman.

Dalam tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya melakukan hal itu — memvalidasi dan mengirimkan formulir kontak tanpa penyegaran halaman menggunakan jQuery! Mari kita mulai.

Apa yang Kami Bangun

Dalam contoh ini, kami memiliki formulir kontak sederhana dengan nama, email, dan nomor telepon. Formulir mengirimkan semua bidang ke skrip PHP tanpa penyegaran halaman apa pun, menggunakan fungsi jQuery asli.

1. Buat Formulir HTML

Mari kita lihat markup HTML Anda. Kami mulai dengan formulir HTML dasar kami:

<div id="contact_form">
<form name="contact" action="">
  <fieldset>
    <div class="input-box">
    <label for="name" id="name_label">Nama</label>
    <input type="text" name="name" id="name" minlength="3" placeholder="Monty" class="text-input" required/>
    </div>
    
    <div class="input-box">
    <label for="email" id="email_label">Email</label>
    <input type="email" name="email" id="email" placeholder="example@tutsplus.com" class="text-input"/>
    </div>
    
    <div class="input-box">
    <label for="phone" id="phone_label">Telephone</label>
    <input type="tel" name="phone" id="phone" class="text-input" placeholder="856-261-9988"/>
    </div>
    
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
  </fieldset>
</form>
  <div class="greetings">
  <h1>Contact US</h1>
    <p>Kami menunggu kabar dari Anda!</p>
  </div>
</div>

Anda mungkin memperhatikan bahwa benjaminsterling telah menyertakan div dengan id contact_form yang membungkus seluruh formulir.

Pastikan untuk tidak melewatkan div itu dalam formulir Anda sendiri karena kami akan membutuhkan div pembungkus ini nanti. Anda mungkin juga memperhatikan bahwa saya telah mengosongkan bagian tindakan dan metode dari tag formulir. Kami sebenarnya tidak membutuhkan keduanya di sini, karena jQuery akan mengurus semuanya nanti.

Hal penting lainnya adalah memastikan untuk memasukkan nilai id untuk setiap field input. Nilai id adalah apa yang akan dicari skrip jQuery Anda untuk memproses formulir.

Kami juga melakukan beberapa validasi sisi klien yang sangat dasar menggunakan atribut HTML5 seperti diperlukan dan panjang minimum. Atribut minlength akan memastikan bahwa pengguna memberikan nama yang panjangnya setidaknya tiga karakter. Demikian pula, atribut wajib memastikan bahwa pengguna mengisi semua nilai formulir yang Anda butuhkan.

Anda dapat membaca lebih lanjut tentang atribut ini di tutorial kami tentang memvalidasi input formulir hanya dengan menggunakan HTML5 dan Regex.

Baca Juga : Perbandingan Plugin Flipbook jQuery Terbaik Versi Gratis dan Berbayar

I’ve added some CSS styles to produce the following form:

* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}
div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}
div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}
div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}
div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}
input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}
h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}
div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%);
  background-size: 50px;
}
div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}
div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;

2. Mulai Menambahkan jQuery

Langkah selanjutnya dalam proses ini adalah menambahkan beberapa kode jQuery. Saya akan berasumsi bahwa Anda telah mengunduh jQuery, mengunggah ke server Anda, dan mereferensikannya di halaman web Anda.

Selanjutnya, buka file JavaScript baru lainnya, referensikan dalam HTML Anda seperti yang Anda lakukan pada file JavaScript biasa, dan tambahkan yang berikut ini:

$(function() {
// set up form validation here
});

Fungsi ini berjalan segera setelah dokumen HTML siap. Jika Anda telah melakukan pekerjaan apa pun di jQuery sebelumnya, fungsi ini sama dengan fungsi document.ready jQuery. Di dalam, kami akan menyiapkan kode validasi kami.

3. Tuliskan Beberapa Validasi Formulir

Kami sekarang akan menulis beberapa validasi formulir dasar menggunakan jQuery. Ini akan meningkatkan validasi yang kami miliki sejauh ini. Menggunakan pustaka validasi memberi kita lebih banyak kontrol atas pesan kesalahan yang ditampilkan kepada pengguna. Ini juga membutuhkan sedikit atau tidak ada perubahan dalam markup formulir.

Mulailah dengan memuat pustaka Validasi jQuery di halaman web Anda. Sekarang tinggal tambahkan kode berikut:

$(function () {
$(“form”).validate();
});

Pastikan Anda meneruskan pemilih yang tepat saat memanggil metode validate (). Ini akan memvalidasi formulir tanpa mengharuskan Anda untuk menulis pesan kesalahan apa pun di HTML atau logika untuk menampilkan dan menyembunyikan pesan kesalahan yang berbeda di JavaScript. Coba kirimkan formulir tanpa mengisi nilai apa pun atau dengan sengaja menambahkan masukan yang salah. Formulir tersebut akan menampilkan pesan kesalahan yang bagus seperti gambar berikut.

Menggunakan pustaka validasi juga memungkinkan Anda menambahkan logika validasi bersyarat ke formulir Anda. Misalnya, Anda dapat menambahkan kode yang memerlukan nomor telepon hanya jika alamat email belum diberikan.

4. Proses Pengiriman Formulir Dengan Fungsi jQuery AJAX

Sekarang kita masuk ke inti tutorial — mengirimkan formulir kita tanpa penyegaran halaman, yang mengirimkan nilai formulir ke skrip PHP di latar belakang. Mari kita lihat semua kodenya terlebih dahulu, dan selanjutnya saya akan memecahnya menjadi lebih detail. Tambahkan kode berikut tepat di bawah cuplikan validasi yang kami tambahkan sebelumnya:

$( "form" ).on( "submit", function(e) {
    var dataString = $(this).serialize();
    
    // alert(dataString); return false;
    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function () {
        $("#contact_form").html("<div id='message'></div>");
        $("#message")
          .html("<h2>Contact Form Submitted!</h2>")
          .append("<p>We will be in touch soon.</p>")
          .hide()
          .fadeIn(1500, function () {
            $("#message").append(
              "<img id='checkmark' src='images/check.png' />"
            );
          });
      }
    });
    e.preventDefault();
  });
});

Ada banyak hal yang terjadi di sini! Mari kita uraikan semuanya — sangat sederhana dan mudah digunakan setelah Anda memahami prosesnya.

Pertama-tama kita membuat string nilai, yang merupakan semua nilai formulir yang ingin kita teruskan ke skrip yang mengirim email. Ini dapat dicapai dengan cukup mudah menggunakan metode serialize () bawaan di jQuery. Dengan cara ini Anda tidak perlu khawatir tentang mendapatkan dan menggabungkan nilai dari input pengguna valid yang berbeda sendiri.

Saya telah mengomentari peringatan yang terkadang saya gunakan untuk memastikan saya mendapatkan nilai yang benar, yang mungkin berguna bagi Anda dalam prosesnya. Jika Anda menghapus komentar peringatan itu dan menguji formulir Anda, dengan asumsi semuanya telah berjalan dengan baik sejauh ini, Anda akan mendapatkan pesan yang mirip dengan berikut ini:

Sekarang kita sampai ke fungsi AJAX utama kita, bintang pertunjukan hari ini. Di sinilah semua aksi terjadi, jadi perhatikan baik-baik!

$("form").on("submit", function (e) {
    var dataString = $(this).serialize();
    
    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function () {
        // Display message back to the user here
      }
    });
    e.preventDefault();
});

Pada dasarnya, apa yang terjadi dalam kode adalah ini: Fungsi .ajax () memproses nilai dari string kita yang disebut dataString dengan skrip PHP yang disebut bin / process.php, menggunakan tipe metode POST (HTTP). Jika skrip kami berhasil diproses, kami kemudian dapat menampilkan pesan kembali ke pengguna, dan akhirnya mengembalikan false sehingga halaman tidak memuat ulang. Itu dia! Seluruh proses ditangani di sana dalam beberapa baris ini!

Ada hal lebih lanjut yang dapat Anda lakukan di sini, selain memberikan pesan sukses. Misalnya, Anda bisa mengirim nilai Anda ke database, memprosesnya, lalu menampilkan hasilnya kembali ke pengguna. Jadi jika Anda memposting polling ke pengguna, Anda dapat memproses suara mereka, lalu mengembalikan hasil voting, semuanya tanpa perlu menyegarkan halaman.

Mari kita rangkum apa yang terjadi dalam contoh kita, untuk memastikan kita telah membahas semuanya. Kami mengambil nilai formulir kami dengan jQuery menggunakan metode serialize (), dan kemudian menempatkannya ke dalam string seperti ini:

var dataString = $(this).serialize();

Kemudian kami menggunakan fungsi ajax() jQuery untuk memproses nilai dalam dataString. Setelah proses itu selesai dengan sukses, kami menampilkan pesan kembali ke pengguna dan mengembalikan false sehingga halaman kami tidak menyegarkan:

Bagian sukses dari skrip telah diisi dengan beberapa konten tertentu yang dapat ditampilkan kembali kepada pengguna. Tapi sejauh fungsionalitas AJAX kami berjalan, itu saja. Untuk opsi dan pengaturan lainnya, pastikan untuk memeriksa dokumentasi jQuery tentang fungsi ajax. Contoh di sini adalah salah satu implementasi yang lebih sederhana, tetapi meskipun demikian, ini sangat kuat, seperti yang Anda lihat.

5. Menampilkan Pesan Kembali ke Pengguna

Lihat sekilas bagian kode yang menampilkan pesan kita kembali ke pengguna, untuk menyelesaikan tutorial.

Pertama, kita mengubah seluruh konten div #contact_form (ingat saya bilang kita akan membutuhkan div itu) dengan baris berikut:

Ini menggantikan semua konten di dalam formulir kontak, menggunakan fungsi html () jQuery. Jadi alih-alih formulir, kami sekarang memiliki div baru dengan id pesan. Selanjutnya, kami mengisi div itu dengan pesan yang sebenarnya: h2 mengatakan Formulir Kontak Dikirim:

Kami akan menambahkan lebih banyak konten ke pesan dengan fungsi append () jQuery, dan untuk melengkapi semuanya, kami menambahkan efek keren dengan menyembunyikan div pesan dengan fungsi jQuery hide (), dan kemudian memudar dengan fadeIn ( ) fungsi:

.append (“<p> Kami akan segera menghubungi. </p>”)
.menyembunyikan()
.fadeIn (1500, function () {
$ (‘# message’). append (“<img id = ‘checkmark’ src = ‘images / check.png’ />”);
});

Baca Juga : Membuat Auto Height 100% Dengan CSS

Jadi pengguna akhirnya melihat yang berikut setelah mereka mengirimkan formulir:

Kesimpulan

Sekarang, saya pikir Anda harus setuju bahwa sangat mudah untuk mengirimkan formulir tanpa penyegaran halaman menggunakan fungsi ajax () jQuery yang kuat. Dapatkan saja nilainya di file JavaScript Anda, proses dengan fungsi ajax (), dan kembalikan false. Anda dapat memproses nilai-nilai dalam skrip PHP Anda seperti yang Anda lakukan pada file PHP lainnya, satu-satunya perbedaan adalah bahwa pengguna tidak perlu menunggu penyegaran halaman — semuanya terjadi secara diam-diam di latar belakang.

Jadi, jika Anda memiliki formulir kontak di situs web Anda, formulir masuk, atau bahkan formulir yang lebih canggih yang memproses nilai melalui database dan mengambil hasilnya, Anda dapat melakukan semuanya dengan mudah dan efisien dengan AJAX.

Benjamin Sterling - Informasi berserta modul jQuery Terlengkap