Tutorial Javascript 37 : Ajax Form, Cara Membuat Form dengan AJAX

Last Updated on August 30, 2022 by

Halo pembaca setia codekey.id! Setelah sebelumnya kita membahas tentang penggunaan AJAX yang dapat Anda baca pada link berikut https://codekey.id/javascript/ajax-adalah/ Penggunaan AJAX pada Aplikasi Web kali ini kami akan mengulas kembali tentang AJAX, tepatnya cara membuat form AJAX.

Bagi Anda yang baru di sini, dapat membaca berbagai referensi tentang bahasa pemrograman JavaScript dan lainnya juga dapat menemukannya di blog ini!

Kami sarankan untuk membaca artikel sebelumnya terlebih dahulu agar Anda dapat mengetahui dan memahami apa itu AJAX atau Asynchronous JavaScript and XML. Namun secara singkat, AJAX adalah sekumpulan teknis pengembangan pemrograman web yang memungkinkan aplikasi web bekerja secara asynchronous atau tidak langsung.

Form adalah sesuatu yang lumrah dan sangat sering ditemukan di berbagai aplikasi web. Salah satu teknik yang sering digunakan adalah AJAX. Dengan menggunakan AJAX, saat mengisi atau mengirimkan formulir, user/pengguna tidak perlu memuat halaman baru. Sebab dengan pengiriman form AJAX memungkinkan Anda mengirim data di latar belakang.

Tentunya hal ini akan menghindari pengguna dari memuat ulang situs web untuk melihat pembaruan. Sejalan dengan itu, hal ini akan membuat pengalaman pengguna jauh lebih baik.

Dengan membiarkan browser dan server bertukar informasi tanpa mengganggu aktivitas lain, ini akan menghemat waktu dan sumber daya yang seharusnya Anda buang terus-menerus hanya untuk memuat ulang situs web yang digunakan.

Nah, pada pembahasan kali ini kami akan memaparkan beberapa point penting berikut ini:

1. Form AJAX: Tips Penting
2. Form dengan Options yang dapat Dipilih
3. Menginputkan Text pada Form AJAX
4. Ringkasan Pembahasan

Form AJAX : Kiat Penting

Berikut ini beberapa hal yang harus Anda pahami dalam proses pembuatan form AJAX:

• AJAX merupakan akronim dari Asynchronous JavaScript and XML.
• Dengan mengirimkan permintaan asinkron, hal ini dapat memungkinkan aplikasi untuk me-refresh sebagian halaman tanpa harus memuat ulang seluruh halaman.
• Dengan menggunakan AJAX, formulir dapat dibuat lebih fungsional dan dinamis.

Form dengan Options yang dapat Dipilih

Sekarang kita mulai tutorialnya! Pertama-tama kami akan membuat formulir input yang sederhana. Kami membuat formulir ini dengan menggunakan HTML. Sebelum itu, form dengan options yang dapat dipilih maksudnya adalah isian form yang memberikan pilihan jawaban untuk siswa.

Contohnya isian form untuk periode bulan, di mana saat mengisi form siswa akan diberikan 12 pilihan bulan yang ada. Perhatikan contoh penerapan form AJAX di bawah ini :

<form> 
      <select name="siswa" onchange="showSiswa(this.value)"> 
        <option value="">Pilih siswa:</option> 
        <option value="Andi">Andi</option> 
        <option value="Budi">Budi</option> 
        <option value="Dean">Dean</option> 
      </select>
</form>
<br>
<span>Hasil dapat dilihat dibawah ini</span>
<div id="info">
</div>

Pada contoh di atas, user diberikan tiga opsi untuk isian pada pernyataan “Pilih siswa.” Di sini pengguna dapat memilih salah satu dari tiga opsi yang mungkin dari dropdown menu. Ketika mereka melakukannya, sebuah onchange peristiwa akan dipicu.

Pada contoh di atas juga terdapat elemen div yang berfungsi sebagai area untuk informasi tambahan. Namun, fungsi itu belum akan berfungsi. Untuk mengaktifkannya, kita harus memanggil fungsi showSiswa().

Di mana cara penerapan elemen div adalah sebagai berikut :

function showSiswa(str) {    
    if (str == ""){        
      document.getElementById("info").innerHTML = "";
      return;
    } else {
      if (window.XMLHttpRequest) { 
        // script untuk IE 7+ dan browser lainnya
        xmlhttp = new XMLHttpRequest();
      } else {            
        // script untuk IE 5 dan 6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }      
      // cek respon server
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("info").innerHTML = xmlhttp.responseText;}
      }; 
      xmlhttp.open("GET","getsiswa.php?q="+str, true);
      xmlhttp.send();
    }
  }

Berikutnya adalah mengaktifkan form AJAX yang telah dibuat sebelumnya. Untuk mengaktifkannya kita dapat membuat file XMLHttpRequest. Dalam hal ini, onchange  yang sebelumnya terpicu akan memanggil fungsi info Setelah itu, informasi tambahan tentang orang yang dapat dipilih kemudian akan muncul di bagian bawah area input.

Menginputkan Text pada Form AJAX

Dalam membuat sebuah form, menginputkan text tentunya adalah suatu kewajiban. Berikut ini cara menginputkan text pada formulir yang dibuat dengan AJAX:

<body>
    <p><strong>Masukan Nama</strong></p>
    <form> 
      First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Hasil: <span id="info"></span></p>
</body>

Formulir yang kita buat akan dapat mengenali nilai yang sama kita miliki pada contoh pertama yang kita buat. Akan tetapi, untuk dapat menampilkan informasi tambahan, Anda harus memanggil atau menggunakan fungsi showHint(). Berikut ini contoh penggunaan fungsi tersebut:

function showHint(str) {
    //cek jika input nama kosong
    if (str.length == 0) {
      document.getElementById("info").innerHTML = "";
      return;
    } else {
      //jika tidak kosong, buat XMLHttpRequest untuk mendapatkan hasil
      var xmlhttp = new XMLHttpRequest();
      // cek respon server
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("info").innerHTML = xmlhttp.responseText;
        }
      };
      xmlhttp.open("GET", "getsiswa.php?q="+str, true); 
      xmlhttp.send();
    }
  }

Untuk memeriksa apakah formulir yang Anda dapat mengidentifikasi suatu bidang itu kosong atau tidak, Anda dapat memeriksanya dengan variabel str.length. Jika formulir kosong, kita dapat tidak menggunakan placeholder info dan keluar dari fungsi tersebut.

Namun apabila field atau bidang pada formulir terisi, kita dapat membuat sebuah object XMLHttpRequest dengan melakukan set up pada function tersebut agar siap untuk digunakan untuk meng-execute ketika respon daru server sedang disiapkan. Ingatlah bahwa fungsi str ialah untuk menahan konten pada field input.

Ringkasan Pembahasan

Setelah mempelajari cara membuat form AJAX di atas, kita dapat menyimpulkan ringkasan sebagai berikut:

• AJAX berfungsi untuk mengirimkan permintaan asynchronous yang akan membantu browser dan server bertukar informasi. Dengan demikian, Anda dapat melihat pembaruan pada browser tanpa memuat ulang halaman.
• Pembuatan form dengan AJAX ini membantu Anda menghemat waktu dan membuat pengguna merasakan pengalaman yang baik, karena aplikasi yang cepat dan responsif. Pengguna tidak perlu me-refresh halaman terus-menerus.
• Dengan mengguankan AJAX untuk membuat form pada web Anda, pengiriman formulir lebih lancar dan menjadikan UI Anda user friendly.

Sekian pembahasan tutorial ke 37 JavaScript tentang cara membuat formulir pada web browser dengan menggunakan AJAX. Terima kasih telah mengikuti sampai akhir, sampai jumpa di tutorial JavaScript 38! Semoga bermanfaat!