menyembunyikan tabel dengan javascript

inilah pagi terakhir di tahun 2010.. saya tidak akan mempermainkan kata-kata kali ini. saya hanya akan mengajarkan sebuah kode tentang cara menyembunyikan tabel dari pilihan di drop down/select box dengan javascript, ekekekek.

appaaa? uchenk mengajarkan? emangnya dia bisa? emangnya dia pinter? emangnya dia dapat ranking 1 terus?? yah, walaupun begini-begini, walaupun saya tidak selalu ranking satu di sekolah, setidaknya saya selalu ranking satu di hati siswi-siswi di sekolah saya.

baru-baru ini saya berurusan dengan form html yang beberapa komponennya harus disembunyikan dan dimunculkan lagi dengan select box. jika kamu juga ingin mencoba, bisa lihat contohnya berikut ini. sekedar untuk iseng-iseng berhadiah.

pertama-tama, dan yang paling utama, lihatlah kode ini:

<form id="nama_form">
 <table width="199">
  <tr>
   <td>
    <select id="pilihan" size="1" onChange="nama_fungsi()">
     <option value="1" selected="selected">Tabel 1 & 2</option>
     <option value="2">Tabel 1</option>
     <option value="3">Tabel 2</option>
    </select>
   </td>
  </tr>
 </table>
 <table width="199" id="tabel_1" border=1 name="nama_tabel_1" >
  <tr>
   <td>Tabel 1</td>
  </tr>
  <tr>
   <td>Isi Tabel 1</td>
  </tr>
 </table>
 <table width="199" id="tabel_2" border=1 name="nama_tabel_2" >
  <tr>
   <td>Tabel 2</td>
  </tr>
  <tr>
   <td>Isi Tabel 2</td>
  </tr>
 </table>
</form>
<script type="text/javascript">
function nama_fungsi()
{
 var chosenoption=document.getElementById("pilihan").options[document.getElementById("pilihan").selectedIndex]
 if (chosenoption.value=="1"){
  document.getElementById("tabel_1").style.display = '';
  document.getElementById("tabel_2").style.display = '';
 }
 else if (chosenoption.value=="2"){
  document.getElementById("tabel_1").style.display = '';
  document.getElementById("tabel_2").style.display = 'none';
 }
 else {
  document.getElementById("tabel_1").style.display = 'none';
  document.getElementById("tabel_2").style.display = '';
 }
}
</script>

kode di atas akan menghasilkan sebuah form, dengan satu drop down/select box dan dua tabel. tabel-tabel tersebut bisa disembunyikan & dimunculkan kembali dengan mengubah-ubah pilihan di drop down/select box. kamu juga bisa coba menyembunyikan komponen selain tabel, selama komponen tersebut mempunyai id. ohya, tentu masih banyak cara lain untuk menyembunyikan dan memunculkan kembali suatu komponen di html. silakan kamu cari sendiri, dan nanti kasi tau saya. ekekekkk..

oke, karena hari ini tanggal 31 desember 2010, saya mengucapkan, selamat hari jumat, semoga akhir pekan kamu bermanfaat dan menyenangkan. sekian, terimakasih..

validasi form sederhana dengan javascript

form validation with javascript

berhubung pekerjaan di kantor msh dikit, padahal harus menulis utk archive di bln juni, namun tidak menemukan bahan tulisan yg asik, maka dg amat terpaksa saya tulis ini.. sebuah kode sederhana, untuk validasi form dg javascript, hohoho..  warning, kode2 ini tidak dimaksudkan utk programmer tingkat advance, ini hanya sekedar untuk dilihat-lihat dan dicoba-coba aja..

oke yg ini bagian html nya, tinggal di-copy, di-paste, trus di-save dgn nama file: terserah.htm (mungkin kodenya terlihat terpotog, padahal klo udah di-copy and then di-paste, ngga kepotong kok,, dijamin)

<script type='text/javascript' src='validasi.js'></script>
<form name='latihan' method='post' onsubmit='return validasiFormSaatSubmit(this)' action='proses.php'>
 <table>
  <tr>
   <td valign='top' width='100'>Nama Pengguna</td>
   <td valign='top'> : </td>
   <td><input type='text' name='text_nama' onFocus ='getValue(this)' onBlur ='setValue(this)' size='45'></td>
  </tr>
  
  <tr>
   <td valign='top' width='100'>Status Pengguna</td>
   <td valign='top'> : </td>
   <td>
    <input type='radio' value='S' name='radio_status' id='radio_1'>Sudah Menikah<br>
    <input type='radio' value='L' name='radio_status' id='radio_2'>Lajang
   </td>
  </tr>
  <tr>
   <td valign='top'>Kesan</td>
   <td valign='top'> : </td>
   <td><textarea name='textarea_kesan' rows='5' cols='49' onFocus ='getValue(this)' onBlur ='setValue(this)'></textarea></td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td><input type='submit' name='latihan_submit' value='Kirim'></td>
  </tr>
 </table>
</form>

nah, gimana? sudah di-save? oke sekarang kode yg kedua, ini untuk file bernama: validasi.js, ingat ya, validasi.js, harus sama! klo mau diganti, maka link pada bagian kode yg diatas td yg: src=’validasi.js’ harus diganti juga ya..

function validasiFormSaatSubmit(siForm)
{     
 var alasan = "";
 
 alasan += validasiNamaPengguna(siForm.text_nama);
 alasan += validasiStatusPengguna(siForm.radio_status);
 alasan += validasiKesan(siForm.textarea_kesan);
         
 if (alasan != "") {
  alert("Beberapa field harus dikoreksi:\n" + alasan);
  return false;
 }
 return true;
}
   
function validasiNamaPengguna(isi)
{
 var pesan = "";
 
 if (isi.value == "") {  
  isi.style.background = 'Yellow';
  pesan = "- Silakan masukkan Nama Pengguna.\n";
 } else {
  isi.style.background = 'White';
 }
 return pesan;
}
function validasiStatusPengguna(isi)
{ 
 var pesan = "";
 
 if ((isi[0].checked == false ) && (isi[1].checked == false))
 {
  pesan = "- Silakan pilih Status Pengguna.\n";          
 }      
 return pesan;
}

function validasiKesan(isi)
{
 var pesan = "";
    
 if (isi.value == "") {
  isi.style.background = 'Yellow';
  pesan = "- Silakan masukkan Kesan.\n";
 } else {
  isi.style.background = 'White';
 }
 return pesan;
}

oke, jalankan saja file terserah.htm td, tapi pastikan dia satu folder dgn file validasi.js nya ya.. sip.. sekian saja tulisan kali ini. mudah-mudahan membantu klo lg berurusan dgn validasi form di sisi client..

-just write what you can’t remember, what you can’t tell-