Hidden/Visible Element HTML Menggunakan Javascript

April 10th, 2012

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 :)

This entry was posted on Tuesday, April 10th, 2012 at 06:51 and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

8 Responses to “Hidden/Visible Element HTML Menggunakan Javascript”

  1. dissertations Says:

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

  2. HomeworkFox.com Says:

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

  3. аксессуары для Apple Says:

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

  4. ipadplanet.com.ua Says:

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

  5. javaziez Says:

    thank you for the advice

  6. javaziez Says:

    thanks :)

  7. javaziez Says:

    thank you very much

  8. javaziez Says:

    I will write more :)

Leave a Reply

*