Category Archives: Javascript

Disable / Non Aktif Tombol ENTER pada Form HTML

Posted on by

Ada problem dengan salah satu form yang aku buat, dan user minta agar tidak bisa ditekan enter pada form tersebut. Hmmm, akhirnya muncul deh kode javascript untuk menghambat / menonaktifkan tombol enter pada suatu form HTML. Silahkan, kode ada dibawah ini :

function dontEnter(evt) {
	var evt = (evt) ? evt : ((event) ? event : null);
  	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  	if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = dontEnter;

Script diatas silahkan Anda taruh diantara / didalam element …
Telah teruji di Firefox dan IE.
Referensi Kode : http://www.webcheatsheet.com/javascript/disable_enter_key.php

Fungsi String Replace Javascript

Posted on by

Fungsi string replace adalah salah satu fungsi yang pastinya sangat bermanfaat ketika kita beroperasi dengan string, fungsi ini ( str_replace )  adalah salah satu fungsi yang terdapat di Pemrograman Java, namun di javascript belum ada. Karena itu kini saya ingin membuat fungsi yang siap pakai 🙂 dan semoga suatu saat bisa bermanfaat bagi kita semua 🙂

function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}

Contoh penggunaannya adalah sebagai berikut :
Misalnya dalam suatu paragraf, kita ingin mencari suatu kata dan ingin mengganti kata yang kita cari tersebut dengan kata yang baru

var hasil = str_replace(“isi_paragraf”,”kata_dicari”,”kata_baru”);

Counter Text pada Textarea

Posted on by

Hai semua,,, lama juga rasanya tidak posting di blog ini 🙂 . Kehabisan ide buat nuangin kesini, hehe, tapi daripada ndak posting sama sekali di blog ini, kali ini aku posting artikel mengenai bagaimana caranya menghitung jumlah karakter yang kita inputkan pada sebuah textarea menggunakan javascript.

Setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript countText() akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tersebut berupa pengurangan maksimal input keyboard yg didefinisikan dengan variable max = 100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max = 100, maka fungsi alert akan ter-eksekusi, namun ini masih berjalan baik pada browser IE & Mozilla, belum aku coba ke browser lainnya contohnya Safari. Continue reading →

Autosuggest Javascript

Posted on by

Dengan judul tersebut pasti para master udah bilang, ” ah udah biasa “, tapi blog ku ini adalah catatanku, jadi buat jaga – jaga. Males soalnya nulis di buku :p

Kali ini aku coba buat Autosuggest menggunakan Javascript, autosuggest di sini adalah suatu sistem yang memberikan kita rekomendasi pilihan dari data yang kita inputkan. Contohnya seperti di google kalo kita ketik sesuatu pasti muncul beberapa pilihan di bawah form input data.

Autosuggest Javascript

Autosuggest Javascript

google suggest

Autosuggest Google

Seperti gambar di ataslah contoh autosuggest, untuk contoh livenya silahkan kunjungi http://fastprint.co.id/daftar.html di bagian Kota. Algoritma dari sistem kali ini adalah :

  1. Input Data pada database
  2. Pemanggilan dan pengelompokan data dan ditampung pada satu variabel array
  3. Setelah dikelompokkan dalam satu array, kemudian kita akan mencari string yang sesuai dengan yang kita input
  4. Menampilkan hasil kata – kata dari array yang mirip dengan apa yang kita ketik
  5. Pilih yang sesuai dan selesai

Oke,,, untuk lebih jelasnya silahkan download source secara lengkap di Download Autosuggest Javascript PHP. Oke, Selamat Mencoba 🙂

Fungsi trim(string) javascript

Posted on by

Fungsi trim adalah fungsi yang bertujuan untuk menghilangkan suatu karakter dari suatu teks atau kumpulan teks. Ini bertujuan jika pada saat ada user yang posting atau comment atau apalah di suatu form dalam satu website, dia tidak menginputkan apapun kecuali spasi, nah pada dasarnya spasi itu termasuk karakter, tapi pada saat kita lihat jika postingan tersebut tersimpan, gag kelihatan apa – apa kan ? Karena itu, trim ini berfungsi untuk mengecek apakah user tadi jahil atau gag … 🙂

function trim(str){
    return str.replace(/^\s+|\s+$/g,'');
}

var text = '';
if(trim(text)=='') alert('Text kosong'); else alert('Text tidak kosong');

Shortcut pada halaman Web Site

Posted on by

Alhamdulillah,,, akhirnya punya bahan juga untuk posting …
Dilihat dan dipahami dari judulnya, mungkin ada yang mengira bahwa postingan ini adalah memberitahu kita bagaimana cara membuat suatu shortcut di desktop yang nantinya menuju ke website kita pada saat di klik. Tentu perkiraan tersebut salah !!!
Maksud dari judul tersebut adalah bagaimana cara membuat suatu shortcut key pada halaman website, contohnya,,, jika kita punya wordpress dan ingin posting sesuatu melalui halaman Admin, nah dibagian textarea-nya jika kita ingin menebalkan huruf kan kita tekan Ctrl+B otomatis huruf yang kita blok tadi menjadi tebal. Nah seperti itulah nantinya tutorial kali ini. Jadi bisa aja nanti kita pasang script dimana saat kita tekan Ctrl+B tiba – tiba muncul alert “Hallooo”.

Ok, sekian kata pengantarnya, langsung saja. Kita ini pakai javascript keyboard event handling. Whwhehe,,, intinya kita pake javascript. Continue reading →

Simple Dropdown Menu

Posted on by

Di internet pastinya sudah banyak source – source mengenai Dropdown Menu, ada yang menggunakan jQuery, mooTools dan sebagainya. Namun kali ini aku coba buat dropdown sesimple mungkin, namun dropdown ini tanpa delay waktu saat mouse mejauh. Jadi jika kita jauhkan mouse, maka langsung aja dropdownnya hilang tanpa selang waktu berap detik. Aku berharap bisa membantu bagi semua pembaca artikel ini. 😉

Ini sintaks Javascript nya, silahkan kamu taruh ini di antara element <head> dan </head>

<script>
function tampilMenu(){
document.getElementById(‘menuPopup’).style.display = ‘block’;
}

function tutupMenu(){
document.getElementById(‘menuPopup’).style.display = ‘none’;
}
</script>

Lalu, di bawah ini untuk stylenya pake CSS taruh diantara element <head> juga. Continue reading →

Input Numeric Only

Posted on by

Untuk validasi ketika ngetik di suatu textbox jadi hanya numerik saja yang bisa diinputkan. Ni buat jaga – jaga, kan biasanya di form telepon di suatu pendaftaran online, kadang user yang ngawur di isi aja pake abjad.

function isNumeric ( evt ) {
    var charCode = ( evt.which ) ? evt.which : event.keyCode;
    if ( charCode > 31 && (charCode < 48 || charCode > 57) ) return false;
    return true;
}

<input type=”text” name=”phone” onkeypress=”return isNumeric(event)”>

if ( charCode > 31 && (charCode < 48 || charCode > 57) )

Untuk charCode > 31 dan lainnya itu adalah range suatu karakter entah apa namanya, aku juga lupa :p . Pokonya di antara range itu adalah range untuk tipe data numerik. Kalo masih penasaran coba aja googling tentang hal ini.

onkeypress=”return isNumeric(event)”

Onkeypress menandakan saat kita sedang ngetik di suatu form. Nah pas sedang ngetik, si fungsi isNumeric itu tadi juga sekalian ngecek apakah yang kita input itu numerik atau buka. Kalo bukan ya ndak akan tampil apa – apa, tapi kalo numerik akan muncul sesuai angka yang kita inputkan.

Ya semoga bermanfaat. Terima Kasih.

Countdown Timer Javascript

Posted on by

Hemh,,, mumpung lagi minat posting …
Kali ini aku mau berbagi pengetahuanku tentang javascript, bagi yang udah tau, mohon sarannya ya,,, 😉

Gini, script ini nantinya akan menampilkan Waktu yang berjalan mundur dan akan berhenti jika nilainya 0. Mulai ya …

<div id="show_time"></div>

<script>
var milidetik = 0; // awal mula mili detik dihitung 0 = 9, 1 = 8 ...
var detik = 30; // lama waktu timer
document.getElementById('show_time').value=detik;

function timerCountdown(){
   if (milidetik<=0){
       milidetik = 9;
       detik -= 1 ;
   }

   if (detik <=- 1){
       milidetik = 0;
       detik += 1;
   }else{
       milidetik -= 1;
       document.getElementById('show_time').value = detik+"."+milidetik;
       setTimeout("timerCountdown()",100);
   }
}

timerCountdown();
</script>

Nah, di bagian div nanti akan muncul countdown timernya,,, lumayan gampang kan … silahkan dicoba, semoga bermanfaat.

Expand / Collapse Paragraph

Posted on by

Yaaahhh, daripada nganggur posting iseng2an ah … 🙂

Hemhh,,, kali ini aku mau bahas tentang Toogle Paragraph atau Expand / Collapse Paragaraf, atau bisa juga disebut Paragraf yang kembang kempis … hehehehe …

Pertama buat dulu javascript lalu taruh script ni di bagian head

function toogle(a){
	var b = document.getElementById(a);
	if(!b) return true;
	if(b.style.display == "none"){
		b.style.display = "block";
	}else{
		b.style.display = "none";
	}
	return true;
}

Nah, sekarang kita buat contoh paragrafnya, ni paragraf taruh di bagian body yaaa …

<input onclick="return toogle('paragraf');" type="button" value="lihat full" />
<div id="paragraf" style="display:none;">Hahahaha, ini gua</div>

Keterangannya, onclick=”return toogle(‘paragraf’);” , ini maksudnya kita panggil fungsi javascript:toogle. Nah fungsi toogle tadi mengontrol paragraf yang id nya paragraf . Yang di kontrol yaitu <div id=”paragraf” . Begitu … Udah gitu coba dah di klik button nya, pasti paragrafnya ilang muncul ilang muncul … hehehe kayak Hantu.

Udah ah, sekian …