Submit Form Dengan jQuery Ajax

Beberapa hari yang lalu saya sudah membuat artikel tentang 13 Video Tutorial Untuk Membuat Dasar Sosial Media dan kali ini saya akan membuat artikel tentang membuat submit form dengan ajax atau bagaimana caranya membuat submit form tanpa reload halaman. Jadi, ketika kita men-submit form atau mengirim data form ke server-side itu tidak memerlukan reload halaman.

Untuk pengertian dari ajax itu sendiri silahkan googling dan yang akan kita gunakan adalah fungsi ajax dari jQuery untuk selengkapnya silahkan klik disini. Tidak usah basa-basi lagi ya .. langsung aja scroll kebawah :D

Here we go!

1. Struktur file untuk tutorial ini.

Struktur File

2. Buka text editor kesayangan kamu dan tuliskan coding seperti berikut.

<!DOCTYPE html>
<html>
<head>
<title>Submit Form jQuery Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<form method="post" action="proses.php">
<h2>Status</h2>
<textarea name="status" class="status" placeholder="Sedang memikirkan apa?"></textarea>
<button class="btn" type="submit">Kirim</button>
</form>
<script type="text/javascript">
$(function(){
$("form").submit(function(){
$.ajax({
url:$(this).attr("action"),
data:$(this).serialize(),
type:$(this).attr("method"),
dataType: 'html',
beforeSend: function() {
$("textarea").attr("disabled",true);
$("button").attr("disabled",true);
},
complete:function() {
$("textarea").attr("disabled",false);
$("button").attr("disabled",false);
},
success:function(hasil) {
var txt = $("textarea");
if(txt.val().trim().length < 1) {
alert("Status masih kosong");
}else{
$("#data_status").after(hasil);
$(".status-box").eq(0).hide().fadeIn();
$("#data_status h1").remove();
$("form")[0].reset();
setTimeout(function(){
$("textarea").focus();
},1000);
}
}
})
return false;
});
});
</script>
<div id="data_status" class="data">
<h1>Tidak Ada Data Status</h1>
</div>
<!-- Data Status Akan Ditampilkan disini -->
</div>
</body>
</html>

3. Simpan file diatas dengan nama index.php, kemudian buat file baru lagi dan tuliskan coding seperti ini:

<?php
if($_POST) {
$status = $_POST['status'];
echo "<div class=\"status-box\">
<div class=\"user\">
<div class=\"foto\"></div>
<div class=\"desc\">
<div class=\"nama\">
Anonymous
</div>
<div class=\"tanggal\">
Beberapa detik yang lalu
</div>
</div>
</div>
<div class=\"isi\">
$status
</div>
<div class=\"footer\">
<a href=\"javascript:alert('ini hanya contoh');\">Like</a> &nbsp;&bull;&nbsp; <a href=\"javascript:alert('ini hanya contoh');\">Komentari</a> &nbsp;&bull;&nbsp; <a href=\"javascript:alert('ini hanya contoh');\">Bagikan</a>
</div>
</div>";
}

4. Simpan file diatas dengan nama proses.php, kemudian buat file baru lagi dan tuliskan coding seperti dibawah ini:

body {
background: #eee;
font-family: arial;
}
.wrap {
width: 600px;
margin: 0 auto;
position: relative;
display: block;
}
form {
width: 100%;
background: #fff;
padding: 10px;
display: inline-block;
}
form h2 {
margin: 5px 0;
margin-top: 0;
font-size: 16px;
font-family: arial;
}
.status {
width: 580px;
padding: 10px;
font: 12px arial;
border: 1px solid #ddd;
border-left: none;
border-right: none;
resize:none;
}
.btn {
float: right;
padding: 3px 12px;
background: #3498db;
border: 1px solid #2467db;
border-radius: 3px;
color: #fff;
text-decoration: none;
margin-top: 5px;
cursor: pointer;
transition:all .3s;
}
.btn:hover {
background: #2467db;
}
.btn:disabled {
background: #999;
}
.data h1 {
text-align: center;
font-size: 22px;
color: #999;
}
.status-box {
width: 600px;
background: #fff;
padding: 10px;
margin-bottom: 10px;
}
.status-box .user {
width: 100%;
display: inline-block;
}
.status-box .user .foto {
float: left;
width: 40px;
height: 40px;
background: #eee;
border-radius: 3px;
}
.status-box .user .desc {
float: left;
margin-left: 10px;
font-size: 14px;
}
.status-box .user .desc .nama {
display: block;
width: 100%;
font-weight: bold;
}
.status-box .user .desc .tanggal {
display: block;
width: 100%;
font-style: italic;
margin-top: 5px;
font-size: 12px;
}
.status-box .isi {
font-size: 14px;
margin-top: 20px;
}
.status-box .footer {
margin-top: 15px;
}
.status-box .footer a {
color: #333;
text-decoration: none;
font-size: 14px;
}
#data_status {
margin-top: 10px;
}

5. Simpan file diatas dengan nama style.css.

6. Download file jquery.min.js berikut, ubah namanya menjadi jquery.js dan simpan dalam satu folder yang sama.

7. Terakhir silahkan jalankan dibrowser kesayangan kamu.

8. Selesai.

Penampakannya seperti ini :D

2

Final Words

Pada tutorial ini kita sudah membuat submit form dengan jquery ajax mohon maaf jika saya tidak memberikan keterangan ataupun penjelasan mengenai coding yang kita tulis karena keterbatasan waktu :D silahkan tanyakan saja jika tidak coding yang sulit dipahami. Tutorial jquery ajax ini mungkin masih dasar, karena kita belum menghubungkannya dengan database mungkin di tutorial berikutnya saya akan membuat tutorial semacam itu terima kasih dan sampai jumpa.