Fungsi mengambil value input
Dalam membangun sebuah aplikasi website yang dinamis, biasanya kita menggunakan salah satu library javascript, yaitu jQuery. jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML.
Salah satu fitur yang biasa dimanfaatkan oleh programmer adalah fitur ajax. Menurut saya, ajax itu sangat bermanfaat ketika ingin mengambil data dari server tanpa perlu mereload halaman website, sehingga lebih ringan dan efisien, dikarenakan data yang diambil merupakan data utama, iya hanya datanya saja, seperti JSON, teks, HTML, dan lain sebagainya.
Saat mengembangkan aplikasi website yang banyak menggunakan fitur ajax, tentu tidak asing lagi akan mengambil value dari input. Value atau variabel tersebut akan dikirim ke server menggunakan fitur ajax. Hal tersebut sangat simple dan sederhana, karena codingnya juga terlihat sangat sederhana. Akan tetapi ketika proyek kita sudah sangat komplek dan besar, tentu akan sulit untuk mengambil value/variabel secara terus menerus mengetikannya.
Nah, kebetulan saya tipe orang yang malas, maka saya buat fungsi untuk mempermudah dalam mengambil value/variabel. Adapun fungsinya bisa anda pelajari di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.error{
border: 1px solid red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Function cek Input
function cekInput(obj,callback){
var has = [];
$.each(obj, function(index, val) {
var pos = $(val);
if (!pos.val()) {
$(val).addClass('error');
has.push('error');
}else{
$(val).removeClass('error');
}
});
callback(has);
}
$(document).on('keypress', '.perlu', function(event) {
$(this).removeClass('error');
});
//End cek input
//Get input
function getInput(obj,callback){
var arr = {};
$.each(obj, function(index, val) {
if ($(val).val()!=undefined && $(val).val()!='') {
arr[$(val).attr('id')] = $(val).val();
}
});
callback(arr);
}
//End get input
//Submit
$(':submit').click(function(event) {
event.preventDefault();
var obj = $('.perlu');
cekInput(obj,function(data){
if(data.length==0){
var obj = $(':text');
getInput(obj,function(data){
alert(JSON.stringify(data));
})
}
})
});
//End submit
});
</script>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="text" id="nama" class="perlu" placeholder="Nama (perlu)">
<input type="text" id="alamat" class="perlu" placeholder="Alamat (perlu)">
<input type="text" id="ho_hp" placeholder="No. Hp. (tidak perlu)">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Demikian secuil kode yang bisa membuat kemalasan anda tidak terganggu oleh hal yang sebetulnya bisa dibuat sederhana.
Salam,
Muh.Syafi
Salah satu fitur yang biasa dimanfaatkan oleh programmer adalah fitur ajax. Menurut saya, ajax itu sangat bermanfaat ketika ingin mengambil data dari server tanpa perlu mereload halaman website, sehingga lebih ringan dan efisien, dikarenakan data yang diambil merupakan data utama, iya hanya datanya saja, seperti JSON, teks, HTML, dan lain sebagainya.
Saat mengembangkan aplikasi website yang banyak menggunakan fitur ajax, tentu tidak asing lagi akan mengambil value dari input. Value atau variabel tersebut akan dikirim ke server menggunakan fitur ajax. Hal tersebut sangat simple dan sederhana, karena codingnya juga terlihat sangat sederhana. Akan tetapi ketika proyek kita sudah sangat komplek dan besar, tentu akan sulit untuk mengambil value/variabel secara terus menerus mengetikannya.
Nah, kebetulan saya tipe orang yang malas, maka saya buat fungsi untuk mempermudah dalam mengambil value/variabel. Adapun fungsinya bisa anda pelajari di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.error{
border: 1px solid red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Function cek Input
function cekInput(obj,callback){
var has = [];
$.each(obj, function(index, val) {
var pos = $(val);
if (!pos.val()) {
$(val).addClass('error');
has.push('error');
}else{
$(val).removeClass('error');
}
});
callback(has);
}
$(document).on('keypress', '.perlu', function(event) {
$(this).removeClass('error');
});
//End cek input
//Get input
function getInput(obj,callback){
var arr = {};
$.each(obj, function(index, val) {
if ($(val).val()!=undefined && $(val).val()!='') {
arr[$(val).attr('id')] = $(val).val();
}
});
callback(arr);
}
//End get input
//Submit
$(':submit').click(function(event) {
event.preventDefault();
var obj = $('.perlu');
cekInput(obj,function(data){
if(data.length==0){
var obj = $(':text');
getInput(obj,function(data){
alert(JSON.stringify(data));
})
}
})
});
//End submit
});
</script>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="text" id="nama" class="perlu" placeholder="Nama (perlu)">
<input type="text" id="alamat" class="perlu" placeholder="Alamat (perlu)">
<input type="text" id="ho_hp" placeholder="No. Hp. (tidak perlu)">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Demikian secuil kode yang bisa membuat kemalasan anda tidak terganggu oleh hal yang sebetulnya bisa dibuat sederhana.
Salam,
Muh.Syafi
March 09, 2017
| Next Post | Older Post |
|---|