Membuat Show and hidden html dengan javascript
Ini digunakan untuk membuat combo box 2 pilihan tidak punya KTP maka baris berikutnya tidak muncul inputan masukan NIK, dan kebalikannnya semisal punya KTP maka ada inputan masukan NIK. Kodenya adalah sebagai berikut :
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$("#ktp").change(function() {
console.log($("#ktp option:selected").val());
if ($("#ktp option:selected").val() == 'Tidak Ada') {
$('#no_ktp').prop('hidden', 'true');
$('#ktp2').prop('hidden', 'true');
$('#t').prop('hidden', 'true');
} else {
$('#no_ktp').prop('hidden', false);
$('#ktp2').prop('hidden', false);
$('#t').prop('hidden', false);
}
});
});
</script>
</head>
<body>
<label style="margin:20px;">
KTP : <br />
<select id="ktp" name="ktp" style="margin-left:20px;">
<option value="Tidak Ada">Tidak Ada</option>
<option value="Ada">Ada</option>
</select>
<input type="text" name="no_ktp" id="no_ktp" value="" hidden />
<select id="ktp2" name="ktp2" style="margin-left:20px;" hidden>
<option value="Tidak Ada">Tidak Ada</option>
<option value="Ada">Ada</option>
</select>
<div class="form-group row" id="t" hidden>
<label class="col-sm-4 col-form-label">Jenis Bangunan</label>
<div class="col-sm-8">
<select class="form-control" name="jenis_bangunan">
<option value="">-- Pilih --</option>
<?php
$sql = mysqli_query($con, "select * FROM jenis_bangunan")
or die("Error Query : ".mysql_error);
while($data = mysqli_fetch_array($sql)){ ?>
<option value="<?php echo $data['nama']?>"><?php echo $data['nama']?></option>
<?php }?>
</select>
<div class="invalid-feedback">
Masukkan Jenis Pelayanan dengan benar!
</div>
</div>
</div>
</label>
</body>
</html>
0 Response to "Membuat Show and hidden html dengan javascript"
Post a Comment