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

Di Tulis Oleh : Ivan Silalahi 6 comments


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




jedar.co.id

Tutorial terkait dengan Ajax PHP : Membuat Submit Form Dengan Ajax Menggunakan jQuery dan PHP :

Terimakasih Atas Kunjungan Sahabat Setia Belajar Pintar PHP
Judul Pelajaran PHP : Ajax PHP : Membuat Submit Form Dengan Ajax Menggunakan jQuery dan PHP
Ditulis oleh Ivan Silalahi
Rating postingan ini 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://planetsphp.blogspot.com/2012/10/ajax-php-membuat-submit-form-dengan.html. Terima kasih sudah singgah membaca artikel ini. Jangan lupa like dan sharenya serta komentarnya
6 comments:
Addin Webprogamming said... Balas

terimakasih, tapi kenapa ya saat jquery-1.2.3.min.js nya saya update ke versi jquery-1.7.2.min.js tidak jalan...bagai mana caranya biar tutorial di atas bisa jalan pada jquery versi : jquery-1.7.2.min.js

Ivan Silalahi said... Balas

jquery-1.2.3.min.js dengan jquery-1.7.2.min.js itu berbeda,,

jadi otomatis jquery-1.7.2.min.js tidak bisa jalan.

terimakasih

Arif Lapengo said... Balas

mas kok form saya ga bisa di save ke database ya? padahal listing buat save data'a udah saya taruh di tempat yang di sediain..

Aditya Wahyu said... Balas

thx udah di share

visit softwikia blogspot

Ary EJFA said... Balas

Nice share yah, sangat bermanfaat Rental Mobil Palembang Jasa Website Palembang Tutorial Programming Indonesia

Dian Avent said... Balas

Nice info artikelnya mitsubishi palembang
avent philips indonesia
lowongan kerja palembang

Post a Comment

Template by Tutorial Website - Belajar Pintar PHP. Design by Ivan Silalahi | Copyright of Belajar Pintar PHP.