Ajax Form plus Validasi Form

Ajax Form plus Validasi Form

1343
6
SHARE

Hallo sahabat harviacode.com. Ayo ngaku siapa yang alergi sama AJAX? hahaha.. tidak dipungkiri memang AJAX membuat alergi beberapa programmer. khususnya yang tidak terbiasa menggunakan javascript dalam penulisan kodenya. Hal ini tidaklah mengejutkan mengingat AJAX memang sedikit lebih sulit (baca: kode yang ditulis lebih panjang :v) bila dibandingkan dengan form biasa tanpa menggunakan AJAX.

Dengan effort yang lebih tersebut tentu AJAX memiliki kelebihan yang tidak bisa dihasilkan dari form tanpa AJAX. Yang paling utama adalah tidak adanya refresh halaman saat form disubmit, selain itu proses pengiriman data juga akan berlangsung lebih cepat, karena data yang dikirim hanya data utama saja, tidak meliputi tag tag html yang mungkin berukuran cukup besar.

Ok, biar tidak alergi lagi, yuk kita kenalan dengan form ajax. Tapi sebelumnya yakinkan dulu dalam hati bahwa AJAX itu mudah dan mengasyikan :v.

ajax form

Untuk membuat form ajax, buatlah file index.php lalu masukan kode berikut ini. Pada contoh ini, form tidak memiliki attribute action, karena memang dengan AJAX kita tidak memerlukan lagi action. Aksi form akan ditangani oleh fungsi AJAX.

Berikutnya adalah tambahkan javascript berikut ini pada bagian sebelum penutup tag body.

Pada contoh diatas url adalah simpan.php, artinya ketika AJAX berjalan, maka data akan dikirim ke simpan.php. Nah di file simpan.php inilah aksi validasi dan simpan ke database akan dilakukan.

Berikut ini adalah kode untuk simpan.php. Kita menggunakan format json untuk menampilkan respon ke halaman index.php.

Jalankan index.php melalui browser, maka anda akan mendapati hasil seperti pada halaman

DEMO

Penting : bila anda bekerja dengan javascript, sangat disarankan anda menggunakan plugin tambahan seperti firebug untuk mempermudah anda memeriksa hasil dari kode javascript anda. Bagi anda pengguna firefox mozilla anda dapat mendownload firebug pada menu add ons.

Bagikan artikel ini ya.. terima kasih

6 COMMENTS

LEAVE A REPLY