Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya yang kali ini akan share tentang Cara Input Data Dengan Serialize jQuery pada latihan kali ini kita akan input data dengan metode serialize() jQuery. Dan juga menggunakan ajax, kemudian actionnya kita buat file baru untuk proses input datanya, dengan menggunakan serialize() akan sangat cepat dalam melakukan insert data. Dimana dalam melakukan insert data kita cukup memanggil form nya saja yang kita berikan id, kemudian form akan membawa seluruh data yang ada di dalamnya. Lalu kita lakukan eksekusi pada file php nya, nah langsung saja kita implementasikan. Kita buat layoutnya terlebih dahulu seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Input Form Data Ajax dan Serialize jQuery</h3>
<form action="" id="form">
<div class="form-group">
<label for="FirstName">First Name:</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="LastName">Last Name:</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="text" class="form-control" name="age" id="age" placeholder="Age">
</div>
</form>
<button class="btn btn-primary">Save Data</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="response"></div>
</div>
</div>
</div>
</body>
</html>
Save dengan nama index.php, kemudian kita tambahkan script jQuery serialize() dan ajax nya untuk input datanya
$(document).ready(function(){
$("button").click(function(e){
e.preventDefault();
$.ajax({
url:"insert_data.php",
method:"POST",
data:$("#form").serialize(),
beforeSend:function(){
$('.response').html("<span>Loading...</span>")
},success:function(data){
$(form).trigger("reset");
$('.response').fadeIn().html(data);
}
})
});
});
Penjelasan script di atas ini adalah, ketika button di klik maka akan melakukan ajax diisi dengan url:insert_data.php untuk kita eksekusi datanya, kemudian kita beri method:’POST’, lalu kita berikan beforeSend yang di dalamnya kita buat text loading pada class=”response” jadi sebelum data di kirimkan kita akan menampilkan text loading. Dan jika sudah kita tambahkan success yang kita akan berikan fungsi trigger(“reset”) untuk mereset seluruh form input kemudian kita tampilkan dengan fadeIn().html(data) di dalam class=”response”. Terakhir kita buat file dengan nama insert_data.php dan masukkan script di bawah ini
<?php
if(isset($_POST['FirstName'])){
$nama = $_POST['FirstName'];
$last = $_POST['LastName'];
$age = $_POST['age'];
echo '<div class="alert alert-success">
<strong>First Name :</strong>'.$nama.'
</div>';
echo '<div class="alert alert-success">
<strong>Last Name :</strong>'.$last.'
</div>';
echo '<div class="alert alert-success">
<strong>Age :</strong>'.$age.'
</div>';
}
?>
Jika sudah save dan jalankan pada browsernya
Ketika kita klik button maka data akan tampil pada class=”response” yang kita letakkan tepat di bawah formnya, hasilnya seperti di bawah ini
Nah itulah tips Cara Input Data Dengan Serialize jQuery, teman – teman bisa inputkan ke databasenya tinggal tambahkan query sql nya dan masukkan variable nya. Baik, kita jumpa lagi pada artikel yang akan datang termakasih dan sampai jumpa.
