Show hide field form on click select di jquery dan bootstrap
Monday 5 March 2018
Edit
Oke pada kesempatan kali ini tutorial singkat untuk Show hide field form on click select di jquery dan bootstrap atau menampilkan dan menyembunyikan field form kelika option selectbox di pilih, sebelum saya lanjut ke tutorial ada baiknya saya jelaskan fungsi dari show dan hide field.
maksud dari tutorial ini adalah ketika selectbox option dipilih maka muncul field form, tujuannya adalah untuk memberikan pilihan kepada user, contoh nya pada studi kasus yang akan dibahas pada tutorial ini adalah kepemilikan mobil, jadi ketika user memiliki mobil atau kendaraan maka akan muncul pertanyaan lanjutan berupa jumlah seat (bangku penumpang) dan nomor polisi kendaraan.
Dan jika user tidak memiliki kendaraan atau mobil maka field jumlah seat dan nomor polisi tersebut akan terhide atau tidak ditampilkan, langsung saja di simak tutorial singkat berikut ini.
- Pertama silahkan copas code berikut ini, simpan dengan nama testing.php di directory C:/XAMPP/htdocs/testing.php
<html>
<head>
<title>Show hide field form on click select | www.hakkoblogs.com</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<h1><center>Show hide field form on click select | www.hakkoblogs.com</center></h1>
<?php
if(isset($_POST['kirim'])){
$a = $_POST['kendaraan'];
$b = $_POST['jenis'];
$c = $_POST['nopol'];
echo "Punya Kendaraan? :$a";
echo "<br/>";
echo "Total Seat Kendaraan :$b";
echo "<br/>";
echo "Nopol Kendaraan :$c";
echo "<br/>";
} else {
echo "";
}
?>
<form action="testing.php" method="POST" style="margin-top: 50px;">
<table class="table table-bordered">
<tr>
<td><label>Bawa Kendaraan Sendiri</label></td>
<td>
<select name="kendaraan" id="kendaraan" class="form-control" required="required">
<option value="">-- Punya Kendaraan.? --</option>
<option value="YA">YA</option>
<option value="TIDAK">TIDAK</option>
</select>
</td>
</tr>
<tr id="mobil" style="display: none;">
<td><label>Seat Kendaraan <i style="color: red; font-size: 12px;">(* Harap di isi bila membawa kendaraan)</i></label>
<td><select name="jenis" id="jenis" class="form-control" >
<option value="">-- Pilih Jumlah Seat --</option>
<option value="4 Seat"> 4 Seat</option>
<option value="5 Seat"> 5 Seat</option>
<option value="6 Seat"> 6 Seat</option>
<option value="7 Seat"> 7 Seat</option>
<option value="8 Seat"> 8 Seat</option>
</select>
</td>
</tr>
<tr id="mobil1" style="display: none;">
<td><label>Plat Nomor <i style="color: red; font-size: 12px;">(* Harap di isi bila membawa kendaraan)</i></label></td>
<td><input type="text" name="nopol" id="nopol" class="form-control" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="kirim" id="kirim" class="btn btn-sm btn-primary" /> <a href="testing.php" class="btn btn-sm btn-warning"> Refresh</a></td>
</tr>
</form>
</table>
<script type="text/javascript">
$(function () {
$("#kendaraan").change(function () {
if ($(this).val() == "YA") {
$("#mobil").show();
$("#mobil1").show();
} else {
$("#mobil").hide();
$("#mobil1").hide();
}
});
});
</script>
</body>
</html>
- Kemudian jalankan code tersebut di browser dengan memanggil file tersebut dengan mengetikkan localhost/testing.php
- bila berhasil maka anda akan mendapatkan hasil seperti video di bawah ini
Penjelasan singkat kode :
kode di atas adalah untuk pemanggilan CDN (Code Delivery Network) JQuery dan bootstrap 3
<head> <title>Show hide field form on click select | www.hakkoblogs.com</title> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> </head>
Kode di bawah ini untuk menampilkan data dari form yang di submit.
<?php
if(isset($_POST['kirim'])){
$a = $_POST['kendaraan'];
$b = $_POST['jenis'];
$c = $_POST['nopol'];
echo "Punya Kendaraan? :$a";
echo "<br/>";
echo "Total Seat Kendaraan :$b";
echo "<br/>";
echo "Nopol Kendaraan :$c";
echo "<br/>";
} else {
echo "";
}
?>
Kode di bawah ini adalah form untuk memanggil id javascript yang sudah di buat yang berfungsi untuk menghide (menyembunyikan) dan menshow (menampilkan) field form ketika option tertentu di pilih.
<form action="testing.php" method="POST" style="margin-top: 50px;">
<table class="table table-bordered">
<tr>
<td><label>Bawa Kendaraan Sendiri</label></td>
<td>
<select name="kendaraan" id="kendaraan" class="form-control" required="required">
<option value="">-- Punya Kendaraan.? --</option>
<option value="YA">YA</option>
<option value="TIDAK">TIDAK</option>
</select>
</td>
</tr>
<tr id="mobil" style="display: none;">
<td><label>Seat Kendaraan <i style="color: red; font-size: 12px;">(* Harap di isi bila membawa kendaraan)</i></label>
<td><select name="jenis" id="jenis" class="form-control" >
<option value="">-- Pilih Jumlah Seat --</option>
<option value="4 Seat"> 4 Seat</option>
<option value="5 Seat"> 5 Seat</option>
<option value="6 Seat"> 6 Seat</option>
<option value="7 Seat"> 7 Seat</option>
<option value="8 Seat"> 8 Seat</option>
</select>
</td>
</tr>
<tr id="mobil1" style="display: none;">
<td><label>Plat Nomor <i style="color: red; font-size: 12px;">(* Harap di isi bila membawa kendaraan)</i></label></td>
<td><input type="text" name="nopol" id="nopol" class="form-control" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="kirim" id="kirim" class="btn btn-sm btn-primary" /> <a href="testing.php" class="btn btn-sm btn-warning"> Refresh</a></td>
</tr>
</form>
</table>
Kode atau script javascript di bawah ini berfungsi menginisiasi form yang akan di eksekusi berdasarkan id dari selectbox yang valuenya di pilih.
<script type="text/javascript">
$(function () {
$("#kendaraan").change(function () {
if ($(this).val() == "YA") {
$("#mobil").show();
$("#mobil1").show();
} else {
$("#mobil").hide();
$("#mobil1").hide();
}
});
});
</script>
</body>
</html>
nah bagaimana.? cukup mudah bukan untuk membuat Show hide field form on click select di jquery dan bootstrap, pastinya ya. Semoga tutorial dan penjelasan singkat ini bisa berguna dan bermanfaat bagi anda yang membutuhkannya. Silahkan di coba dan dipraktekan ya karena tanpa praktek kita tidak akan bisa melihat hasil apa - apa, artinya jangan berharap hasil kalau tidak mau berusaha.
Selamat Mencoba