Penanganan Form Dengan Jquery Ajax

Sebelumnya saya telah memberikan penjelasan tentang Jquery Ajax. saat ini saya akan memberikan Penanganan Form dengan Jquery Ajax yang sederhana. Sebelum anda mempelajari hal ini, anda harus paham dulu tentang metode load() untuk mengambil data dari server dan menempatkan data yang diambil kedalam elemen yang akan di pilih. Juga telah mempelajari Jquery $.Get dan $.Post metode yang digunakan untuk meminta data dari server dengan HTTP GET atau POST. Jika anda belum mempelajari metode load() anda dapat mempelajarinya dan langsung baca disini mempelajari metode ajax load.

Kali ini saya akan memberikan penggunaan Jquery Ajax untuk mengirim data dalam sebuah form dan memprosesnya. salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvesional adalah anda tidak perlu meninggalkan form selama form dikirimkan atau sedang diproses. Disini saya memakai metode Ajax() yaitu metode yang terdapat didalam Jquey. dengan metode ini anda dapat me load sebuah halaman dengan sebuah HTTP Request.

Contoh Syntax dari metode Ajax

$.ajax({name:value, name: value, ... })

Berikut adalah settingan penting untuk fungsi $.ajax() yang sering digunakan :

Baca Juga : Cara Export dan Import Database Table Pada Phpmyadmin

Type : tipe metode request data, yaitu POST atau GET, defaultnya GET.
Url : string yang merupakan Url atau file di server, tujuan mengirim Request.
Data : data yang ingin anda kirim keserver untuk di proses.
Cache : Bisa bernilai True atau False, data yang di request tidak akan di cache oleh sebuah browser.
Success : fungsi yang anda jalankan jika request telah sukses dijalankan.

Contoh Sintaxnya :

$.ajax({ url: "proses.php",
data: "nama=sidas&email=dastiogarbi@gmail.com&sex=laki-laki",
cache: false,
success: function(msg){
$("#teks").html(msg);
}
});

oke saya langsung saja ke pembuatan Form dengan Jquery Ajax. Disini saya akan memberikan form yang sederhana. Pertama anda harus membuat 2 file dengan format yang berbeda. Saya disini menggunakan nama file ajaxform.html dan proses.php

ajaxform.html

<html>
<head>
<title>AJAX Form</title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
<style type="text/css">body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#result { background-color: #F0FFED; border: 1px solid #215800; padding: 10px; width: 400px;
margin-bottom: 20px; }
</style>
</head>
<body>
<h4>
AJAX Form</h4>
<div id="result">
silakan Isi Data Anda</div>
<form action="proses.php" id="myForm" method="post">
<table>
<tr>
<td width="100">NIM</td>
<td>
<input name="nim" size="30" type="text" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>
<input name="nama" size="40" type="text" />
</td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>
<input name="tempat_lahir" size="40" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>

proses.php

<?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';
}
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><br />';
echo $data;
}
?>

output yang akan ditampilkan oleh script diatas akan menghasilkan sebuah form yang sederhana dan file yang bernama proses adalah proses penyimpanan data yang akan ditampilkan. Demikianlah Form dengan Jquery Ajax yang telah saya berikan.

Penanganan Form Dengan Jquery Ajax

Contoh Syntax dari metode Ajax

Related Posts:

2 Responses to "Penanganan Form Dengan Jquery Ajax "