Dibawah ini adalah skrip jquery yang dimana nantinya akan mengeksekusi untuk mengirim sebuah nilai input ke file proses untuk dan menampilkannya kembali.
//fungsi untuk memproses pengiriman komentar dengan jQuery
$(function() {
//proses setelah button submit di klik
$(".kirimkeun").click(function() {
//data yang terdapat pada input nama
var ngaran = $("#ngaran").val();
//data yang terdapat pada input email
var email = $("#email").val();
//data yang terdapat pada input komentar
var comment = $("#comment").val();
//memanggil semua data yang akan di eksekusi
var dataString = 'ngaran='+ ngaran + '&email=' + email + '&comment=' + comment;
//membuat validasi apabila terdapat input teks yang kosong
if(ngaran=='' || email=='' || comment=='')
{
alert('Tidak Boleh ada yang kosong');
}
else
{
//menampilkan loading sebelum komentar muncul
$("#flash").show();
$("#flash").fadeIn(400).html('
Silahkan tunggu...
');
$.ajax({
//proses eksekusi data dengan method post
type: "POST",
//menentukan file dimana data yang terdapat pada input teks di eksekusi
url: "php/komentarajax.php",
data: dataString,
cache: false,
success: function(html){
//menampilkan data apabila data berhasil di eksekusi
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
//mengembalikan input teks menjadi kosong apabila data berhasil di eksekusi
document.getElementById('email').value='';
document.getElementById('ngaran').value='';
document.getElementById('comment').value='';
$("#ngaran").focus();
$("#flash").hide();
}
});
}
return false;
});
});
Dari kode di atas telah saya masukkan penjelasan mengenai fungsi dari skrip tersebut jadi saya tidak perlu jelaskan kembali. Untuk file prosesnya Anda buat skrip kode dibawah ini dengan nama file komentarajak.php.
<?php
if($_POST){
//hasil data yang akan di eksekusi dari input teks
$ngaran = $_POST['ngaran'];
$email = $_POST['email'];
$comment = $_POST['comment'];
}
?>
<!-- menampilkan hasil dari data yang dikirim tadi -->
<li class="box">
<img src="img/noavatar.png" style="float:left; width:80px; height:80px; margin-right:20px"/>
<span style="font-size:16px; color:#663399; font-weight:bold">
<?php echo $ngaran;?>
</span>
<?php echo $comment; ?>
</li>
Dan skrip dibawah ini adalah untuk membuat tampilan form dimana kita akan mengirimkan data atau untuk mengirim komentarnya dan kemudian ditampilkan kembali tanpa harus load page.
<div id="main">
<ol id="update" class="timeline"></ol>
<div id="flash" align="left"></div>
<form action="#" method="post" id="formurang">
<input type="text" name="ngaran" id="ngaran" placeholder="Nama Anda..."/>
<input type="text" name="email" id="email" placeholder="Email Anda..."/><br />
<textarea name="comment" id="comment" style="width:420px" placeholder="Komentar Anda..."></textarea><br />
<div style="margin-left:340px">
<button class="kirimkeun" id="buttonkomen" type="submit" onclick="$.('#formurang').submit();">Submit</button><br /><br />
</div>
</form>
</div>
Sekian artikel tentang membuat komentar menggunakan jquery semoga dapat bermanfaat dan jika Anda menyukainya mohon untuk di like.
