Membuat Form inputan terlihat lebih elegan menggunakan jquery Ajax

Assalamu Alaikum Wr Wb ?

Pada tutorial kali ini saya akan masih membahas mengenai php, JavaScript dan tentang cara pembuatan form inputan agar terlihat lebih elegan dengan menggunakan jQuery Ajax, dimana penggunaan jQuery Ajax ini, form tersebut terlihat lebih dinamis, dan tanpa Reload Page saat meng inputkan data nya.

IKLAN:


Disini saya menggunakan jQuery Versi 1.6.2, atau anda juga bisa menggunakan Versi yang lebih tinggi dari ini, silahkan anda cari untuk versi yang terbaru nya!

Baiklah sekarang kita lihat contoh penggunaan nya... Di bawah ini telah saya buatkan serangkaian kode untuk memproses data pada form inputan nama dan alamat, yang nantinya akan di proses oleh php script pada file proses.php


File : form.php

<style type="text/css">
#proses{
color:#FF0000;
font-weight:bold;
}
</style>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">
function proses(){
$("#proses").html('Memproses data...');
$.post('proses.php', $("form").serialize(), function(hasil){
$("#proses").html(hasil);
});
}
</script>

<h2>Form dengan Ajax</h2>

<form method="post" action="">
Nama : <input type="text" name="nama"><br>
Alamat : <input type="text" name="alamat"><br>
<input type="button" value="Kirim" onClick="proses();">
</form>
<div id="proses"></div>

Pada saat tombol Kirim di tekan, fungsi proses() yang kita buat menggunakan JavaScript di atas akan bekerja, dan proses berlangsung nya akan terlihat pada bagian div tag id bernama #proses, dan hanya bagian tersebut yang akan me Reload halaman, sementara lainya akan tetap.

Untuk type button pada tombol Kirim di atas, Anda juga bisa menggunakan type submit hanya saja proses nya tidak akan berjalan baik, sebaik nya anda gunakan return false; untuk menutup nya, hal ini untuk menghindari proses pengiriman ulang/reload. Seperti ini : <input type="submit" value="Kirim" onClick="proses(); return false;">

Dalam tutorial ini saya hanya akan menampilkan hasil form inputan saja pada file proses.php nya, dan jika Anda mau menyimpan data tersebut pada database, Anda bisa memproses nya pada bagian proses.php ini, mungking Anda sudah mengerti cara dan ketentuanya mengenai hal tersebut, jika Anda masih bingung, silahkan baca artikel tentang Script php untuk mengirim data ke table database pada phpMyadmin

File : proses.php

<?php
$nama = $_POST[nama];
$alamat = $_POST[alamat];

echo "Nama : $nama";
echo "<br>";
echo "Alamat : $alamat";

?>

 Untuk melihat hasil nya, silahkan Anda putar Video di bawah ini :

IKLAN:


Terimakasih sudah mengunjungi blog ini, jangan lupa untuk memberikan komentar Anda tentang tutorial di atas, dan salam kenal bagi yang baru menemukan blog ini. Thank's