Ajax PHP : Membuat Submit Form Dengan Ajax Menggunakan jQuery dan PHP

Posted on

Halo smua ,, kali ini saya akan membagikan bagaimana cara bagi membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jquery. Oke seketika saja ke TKP …!!!
Studi kasus kali ini ialah contoh pemakaian Ajax bagi mengirimkan data pada sebuah form dan memprosesnya. Diantara kelebihan menggunakan form dengan menggunakan Ajax diperbandingkan form konvensional ialah: kita tak perlu meninggalkan form dalam rentang waktu form dikirimkan/diproses.
Bagi contoh ini, saya menggunakan dua buah file, yang pertama-tama ialah file ajaxform.html bagi menampilkan form nya, dan file proses.php bagi memproses data yang dikirimkan dan menampilkan hasilnya.

Script di file ajaxform.html nya ialah selaku 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; }); })

Pada mengimplementasikan Ajax, di file form.html ini kita menggunakan kegunaan ajax () di jQuery. Manfaat ini mempunyai sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya selaku berikut:

  • type: jenis request yang digunakan, dapat ‘POST’ atau ‘GET
  • url: url yang akan digunakan bagi memproses data. karena di form telah terdapat nilai action (proses.php) karenanya saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr(‘action’)
  • data: data yang dikirimkan, pada format querystring. bagi menghasilkan querystring dari form, saya menggunakan kegunaan serialize()
  • success: kegunaan yang akan dijalankan sekiranya request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, pada hal ini ialah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke pada sebuah div dengan id=”result” )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya ialah selaku berikut:

<?php //validasi
if (trim($_POST[‘nim’]) == ”)
{
$error[] = ‘- NIM mesti diisi’;
}
if (trim($_POST[‘nama’]) == ”)
{
$error[] = ‘- Nama mesti diisi’;
}
if (trim($_POST[‘tempat_lahir’]) == ”)
{ $error[] = ‘- Tempat Lahir mesti diisi’;
} //dan seterusnya  
if (isset($error))
{
echo ‘<b>Error</b>: <br />’.implode(‘<br />’, $error);
}
else
{ /* sekiranya data mau dimasukkan ke database, */
/* karenanya petunjuk SQL INSERT dapat ditulis di sini */  
$data = ”;
foreach ($_POST as $k => $v)
{
$data .= “$k : $v<br />”;
}
echo ‘<b>Form berhasil disubmit. Berikut ini data kamu:</b>’;
echo ‘<br />’;
echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan pada browser kamu masing-masing karenanya hasil outputnya akan ditampilkan di element div yang berada di file ajaxform.html
Bagi lebih jelasnya kamu dapat melihat demonya di Link dibawah ini :

Lihat Demo Ajax Form Disini

Sahabat pun dapat mengunduh sourcecode nya di sini:

Klik Disini Untuk Download

Leave a Reply

Your email address will not be published. Required fields are marked *