Javaziez

All About Code

Hidden/Visible Element HTML Menggunakan Javascript

Interaksi antar element HTML sering kita jumpai, bahkan saat ini jQuery merupakan senjata ampuh dalam melakukan interaksi antar element dan dengan data. Namun, senjata kuno alias javascript pun masih bisa melakukan hal itu, bahkan lebih simple dan cepat. Kali ini kita akan mencoba membuat interaksi antar element html, dimana sebuah element bisa terlihat/muncul dan sembunyi/menghilang dari sebuah halaman web dengan melakukan sesuatu terhadap element lain, dimana element itu adalah sebuah radio button.

Berikut kode lengkapnya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hidden/Visible Element HTML Menggunakan Javascript</title>

<script type="text/javascript">

function tampil_alamat(param)
{
if(param==1)
document.getElementById("templatealamat").style.visibility = 'visible';
else
document.getElementById("templatealamat").style.visibility = 'hidden';

}

</script>

</head>
<body>

<form name="form_pemesanan" action="#" method="post">

<fieldset title="Data Pengirim" id="templatepengirim">
<legend>Data Pengirim</legend>
<table cellpadding="3px">
<tr>
<td>Nama Pengirim</td>
<td>
<input type="text" name="namapengirim" size="30" />
</td>
</tr>
<tr>
<td>Tujuan Pengiriman</td>
<td>
<input type="radio" name="tujuan" value="false" onclick="tampil_alamat(0);" checked /> Alamat Saya<br />
<input type="radio" name="tujuan" value="true" onclick="tampil_alamat(1);" /> Alamat Baru
</td>
</tr>
</table>
</fieldset>

<fieldset title="Alamat Pengiriman" id="templatealamat" style="visibility: hidden;">
<legend>Alamat Pengiriman</legend>
<table cellpadding="3px">
<tr>
<td>Alamat</td>
<td>
<input type="text" name="alamat" size="30" />
</td>
</tr>
<tr>
<td>Kota</td>
<td>
<input type="text" name="kontak" size="30" />
</td>
</tr>
<tr>
<td>Kontak</td>
<td>
<input type="text" name="kontak" size="30" />
</td>
</tr>
</table>
</fieldset>

<fieldset title="Kirim Data" id="templatebutton">
<legend>Kirim Data</legend>
<table cellpadding="3px">
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="btn_submit" value="Kirim" />
</td>
</tr>
</table>
</fieldset>

</form>

</body>
</html>

 

Berikut kita jelaskan setiap kodenya.

 

Kita terlebih dahulu ke bagian kode element radio button :

<input type="radio" name="tujuan" value="false" onclick="tampil_alamat(0);" checked /> Alamat Saya<br />
<input type="radio" name="tujuan" value="true" onclick="tampil_alamat(1);" /> Alamat Baru

Kode di atas adalah kita membuat dua element radio button dengan memiliki event javascript pada “onclick” yang memanggil fungsi “tampil_alamat” dengan satu parameter. Jika salah satu radiobutton dipilih, maka radiobutton tersebut akan memanggil fungsi “tampil_alamat” dan mengirim parameternya. Pilihan “Alamat Saya” dengan parameter fungsi “tampil_alamat” bernilai “0″ ditetapkan sebagai default pilihan awal, artinya form isian “alamat pengiriman” tidak terlihat.

 

Untuk kode fungsi “tampil_alamat” terdapat pada bagian javascript yang sudah dideklarasikan di atas.

<script type="text/javascript">
function tampil_alamat(param)
{
if(param==1)
document.getElementById("templatealamat").style.visibility = 'visible';
else
document.getElementById("templatealamat").style.visibility = 'hidden';
}
</script>

Dari kode tersebut, kita bisa menyimpulkan bahwa jika kita memilih radiobutton dengan pilihan “Alamat Baru” dengan parameter bernilai 1, maka element form isian “alamat pengiriman” akan muncul, karena kondisi “param” bernilai 1.

document.getElementById()  = merupakan  pengambilan element html dengan menggunakan ID element, dimana pada contoh di atas, element dengan ID “templatealamat” – lah yang dipanggil.

document.getElementById() .style.visibility = merupakan property sebuah element (style) dengan property style (CSS) nya adalah “visibility”. Arti dari kode ini adalah, kita mengubah style (CSS) dari element dengan ID templatealamat, dimana visibility-nya menjadi terlihat atau tidak terlihat. Hal ini juga bisa kita gunakan property CSS lainnya, seperti membuat element berwarna latar biru atau hijau.

 

Dari kode ini juga kita dapat membuat hal menarik lainnya, seperti menampilkan dua tampilan yang berbeda (bukan menampilkan/menyembunyikan) terhadap element lain, atau yang lainnya.

Semoga bermanfaat, salam :)

Incoming search terms:

8 Responses so far.

  1. Thank you very much. This information is really helpful. Write more.

  2. This information is really useful! It’s just what I was searching for

  3. Thank you for the information, the article is very well-written.

  4. Splendid job! The topic is on the front burner and it was really interesting to read it. Write more!


CAPTCHA Image
*

Subscribe to email feed

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Koneksi PHP 5.3 ke S

Ketika kita terbiasa menggunakan XAMPP, adakalanya ketika kita diharuskan membuat ...

SQLSRV di PHP 5.4

Sudah menggunakan PHP versi 5.4 keatas? Bagi pengembang aplikasi mungkin ...

WampServer 2.2 (WAMP

Sudah lama Wamp yang saya gunakan tidak diupdate, saya mencoba ...

Install Ubuntu 12.04

Install Ubuntu 12.04 menggunakan CD Sudah lama tidak update Ubuntu, saya ...

Membuat Template Web

Template atau kerangka wadah dalam sebuah website adalah sesuatu yang ...