Vous êtes sur la page 1sur 2

Ajax PHP : Membuat Submit Form Dengan Ajax

Menggunakan jQuery dan PHP


Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit
form atau proses dari suatu form dengan menggunakan Ajax Jquery. Oke langsung saja ke
TKP ...!!!
Studi kasus kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form
dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form
konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.
Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file
ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang
dikirimkan dan menampilkan hasilnya.
Script pada file ajaxform.html nya adalah sebagai berikut :
$(document).ready(function()
{
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();})
.ajaxStop(function()
{
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#myForm').submit(function()
{ $.ajax(
{ type: 'POST', url: $(this).attr('action'), data:
$(this).serialize(), success: function(data)
{ $('#result').html(data); } }) return false; }); })
Dalam mengimplementasikan Ajax, pada file form.html ini kita menggunakan fungsi ajax
() pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value),
dan yang akan saya gunakan di antaranya sebagai berikut:

type: jenis request yang dipakai, bisa POST atau GET


url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat
nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb
menggunakan $(this).attr('action')
data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring
dari form, saya menggunakan fungsi serialize()
success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen
berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file

proses.php (hasil output ini akan saya tampilkan ke dalam


sebuah div dengan id="result" )
Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sebagai
berikut:
<?php //validasi
if (trim($_POST['nim']) == '')
{
$error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '')
{
$error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '')
{ $error[] = '- Tempat Lahir harus diisi';
} //dan seterusnya
if (isset($error))
{
echo '<b>Error</b>: <br />'.implode('<br />', $error);
}
else
{ /* jika data mau dimasukkan ke database, */
/* maka perintah SQL INSERT bisa ditulis di sini */
$data = '';
foreach ($_POST as $k => $v)
{
$data .= "$k : $v<br />";
}
echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
echo '<br />';
echo $data;
}
die();
?>
Setelah file proses.php ini berhasil dijalankan dalam browser anda masing-masing maka hasil
outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html
Untuk lebih jelasnya anda bisa melihat demonya pada Link dibawah ini :

Lihat Demo Ajax Form Disini


Anda juga dapat mendownload source code nya di sini:
Klik Disini Untuk Download