Menghitung jumlah string dalam textarea pada sebuah form inputan dan membatasi jumlah karakter nya dengan batasan jumlah tertentu, hal ini sebaik nya di gunakan dalam pembuatan sebuah form, seperti form login, form komentar, dan lain-lain. Mengapa hal ini perlu di perhatikan...? Supaya seorang user sebelum meng inputkan data pada form tersebut tau, kalo form itu di batasi oleh jumlah karakter yang boleh di masukan.
IKLAN:
Kadang hal ini sering di lupakan oleh sebagian para developer website, mereka ingin segalanya cepat (hard), dalam pembuatan applikasi nya, karena banyak nya permintaan dari klien nya, mungkin...! Kadang mereka hanya membatasi nya pada saat penyimpanan data pada database nya saja, lihat contoh pembatasan karakter atau string pada gambar database mysql di bawah ini :
Field username di atas, di batasi oleh jumlah karakter sebanyak 50 karakter saja yang bisa di inputkan, dan selebih nya jika melebihi dari 50 karakter, maka akan terpotong (hilang) pada saat data tersebut di masukan.
Sekarang saya tidak akan membahas tentang database mysql (mungkin di lain waktu), kita lanjutkan kepada pembuatan sebuah form textarea yang memiliki batasan jumlah karakter yang boleh di inputkan pada form tersebut, dan selebih nya jika jumlah karakter yang di inputkan lebih dari batasan yang telah kita tentukan, akan muncul sebuah peringatan kepada user pengguna, dan form textarea tersebut akan menjadi disable. Disini saya menggunakan bantuan jQuery, untuk memperlihatkan peringatanya, silahkan anda Mendownload nya disini!
Cara download :
Klick link download di atas, kemudian tunggu beberapa saat, setelah itu Klick Link SKIP ADS yang ada di pojok sebelah kanan atas, dan anda akan di arahkan ke halaman Ziddu.
Untuk cara pembuatan nya, pertama-tama buatlah sebuah form seperti pada form contoh di bawah ini :
File : form.html
<form name="formulir" action="LOKASI_PENERIMA_DATA" method="post"><textarea name="teks" cols="25" rows="5" onkeyup="batasan();"></textarea><br /><input type="text" name="jumlah" size="5" /><input type="submit" name="kirim" value="GO" /></form>
Setelah form di buat, kemudian buatlah dua buah fungsi batasan(); dan fungsi tutup(); dengan JavaScript, lihat kode di bawah ini :
<script type="text/javascript">function batasan(){
formulir.jumlah.value = 10-formulir.teks.value.length;
if (formulir.teks.value.length > 10){
$("#alert").html('String minimal harus 10 karakter! <a href="javascript:tutup();">OK</a>');
formulir.teks.disabled="disabled";
formulir.jumlah.disabled="disabled";
formulir.kirim.disabled="disabled";
}
}
function tutup(){
$("#alert").html('');
formulir.teks.disabled=false;
formulir.jumlah.disabled=false;
formulir.kirim.disabled=false;
}
</script>
Coba perhatikan pada bagian $("#alert"). Peringatan ini akan muncul pada bagian tag yang memiliki id alert, maka untuk memperlihatkan peringatan ini, buatlah sebuah tag <div id="alert"> atau bisa juga dengan <span id="alert">, kemudian bagian isi nya biarkan saja kosong, seperti contoh <div id="alert"></div>, silahkan lihat koding lengkapnya di bawah ini :
File : form.html
<html><head><title>Tutorial jumlah string dalam textarea</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">function batasan(){
formulir.jumlah.value = 10-formulir.teks.value.length;
if (formulir.teks.value.length > 10){
$("#alert").html('String minimal harus 10 karakter! <a href="javascript:tutup();">OK</a>');
formulir.teks.disabled="disabled";
formulir.jumlah.disabled="disabled";
formulir.kirim.disabled="disabled";
}
}
function tutup(){
$("#alert").html('');
formulir.teks.disabled=false;
formulir.jumlah.disabled=false;
formulir.kirim.disabled=false;
}
</script></head><body><div id="alert" style="position:absolute; background-color:#FF6600; color:#990000;"></div><form name="formulir" action="LOKASI_PENERIMA_DATA" method="post"><textarea name="teks" cols="25" rows="5" onkeyup="batasan();"></textarea><br /><input type="text" name="jumlah" size="5" /><input type="submit" name="kirim" value="GO" /></form></body></html>
IKLAN:
Untuk jquery-162-min.js yang tadi anda download, silahkan silahkan extract file .zip, kemudian letakan file jquery-162-min.js hasil extract tadi pada directory yang sama dengan file form.html.
Demo :
Semoga tutorial di atas dapat berguna bagi yang membaca nya, dan jangan lupa untuk memberikan komentar nya. Thank's
0 Komentar