Replace komponen html dengan JS
Ariyasa · Jan 14, 2015
MOhon bantuanya bli putu.
saya mo mengganti sebuah kelompok komponen html dg komponen yg lain dg js dan yg saya temukan cuma sistem "visible" dan "hidden" pada properti visibility-nya saja.
saya sudah coba dan mau.. tapi kelemahannya adalah, terdapat ruang pada kelompok komponen yg visibility-nya hidden sehingga komponen yg visible ttp ada dibawahnya.
yg saya inginkan agar kompnen yg visible menutupi yg hidden shg tidak ada ruang kosong(komponen hidden meninggalkan ruang kosong).
berikut scriptnya. Nb. baru belajar js. Suksma.
saya mo mengganti sebuah kelompok komponen html dg komponen yg lain dg js dan yg saya temukan cuma sistem "visible" dan "hidden" pada properti visibility-nya saja.
saya sudah coba dan mau.. tapi kelemahannya adalah, terdapat ruang pada kelompok komponen yg visibility-nya hidden sehingga komponen yg visible ttp ada dibawahnya.
yg saya inginkan agar kompnen yg visible menutupi yg hidden shg tidak ada ruang kosong(komponen hidden meninggalkan ruang kosong).
berikut scriptnya. Nb. baru belajar js. Suksma.
<!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("alamatkantor").style.visibility = 'hidden';
document.getElementById("alamatrumah").style.visibility = 'visible';
}else{
document.getElementById("alamatkantor").style.visibility = 'visible';
document.getElementById("alamatrumah").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 Kantor
<label></label>
<br />
<input type="radio" name="tujuan" value="true" onclick="tampil_alamat(1);" />
Alamat Rumah</td>
</tr>
</table>
</fieldset>
<fieldset title="Alamat Pengiriman" id="alamatkantor" style="visibility: visible;">
<legend>Alamat Kantor</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="Alamat Pengiriman" id="alamatrumah" style="visibility: hidden;">
<legend>Alamat Rumah</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> </td>
<td>
<input type="submit" name="btn_submit" value="Kirim" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>