Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67507 Members, 783 Products, 5291 Topic, 12956 Comments)

Mohon pencerahan Seleksi input di combo box, Show and hide html

Dibuat
Login Terakhir 5 Tahun lalu,
Telah Dilihat 1745 Kali
Nian Dwi Christianto SW Mengatakan : Sultan Account 
  1. <label>Status Pengajuan :</label>
  2. <select class="form-control" name="status" type="text" id="status">
  3.   <?php
  4. //mengambil nama-nama departemen yang ada di database
  5. $status = mysql_query("SELECT * FROM status_pengajuan ORDER BY status");
  6. while($sp=mysql_fetch_array($status)){
  7. echo "<option value=\"$sp[id]\">$sp[status]</option>\n";
  8. }
  9. ?>
  10. </select>
  11. </div>
  12. <div class="form-group">
  13.  <form action="status_kerja"> 
  14. <p>Tanggal MCU Terakhir :<input type="date" name="tgl_mcu_akhir">  </p></div>
  15. <div class="form-group">
  16. <p>Expired ID Card Lama : 
  17.   <input type="date" name="expired_idcardlama"></p>
  18. </div> 
  19. <div class="form-group">
  20. <p>Pengajuan Section ke HR : <input type="date" name="pengajuansc_hr" />
  21. </p></div>
  22. <div class="form-group">
  23. <p>Pengajuan ke Berau Coal : <input type="date" name="pengajuanke_bc" />
  24. </p></div>
  25. <div class="form-group">
  26. <p>Diterima dari Berau Coal : <input type="date" name="diterimadari_bc" />
  27. </p></div>
  28. <div class="form-group">
  29. <p>Expired ID Card Baru : <input type="date" name="expired_idcardbaru" />
  30. </p></div>
  31. <div class="form-group">
  32. <p>Diberikan kepada pemiliknya : <input type="date" name="diberikanpd_user" />
  33. </p>
  34. </div>
  35.  
  36. <div class="form-group">Report : 
  37.   <select class="form-control" name="report" id="report" required="">
  38.     <option>Aktif</option>
  39.     <option>Expired</option>
  40.   </select>
  41. </div>   
  42.  
  43. <button type="submit" class="btn btn-primary" name="tambah" id="tambah">Tambah</button>
  44. <button type="reset" class="btn btn-default">Batal</button>
  45.                 </form>
Ada 1 File Kiriman :
1. suatu_case_combo_box_selection.txt (595 B)

Ada 3 Jawaban

Bukhori Muslim
commented on 05 Jun 2018 07:39:20		 
  1. Assalam,.. bisa dikondisikan menggunakan javascript, jadinya begini :
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>PHPMU.Com - Show and hide html element on selected option change</title>
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11. $('#idcardlama').hide();
  12. $('#show').on('change', function () {
  13.    var optionSelected = $("option:selected", this);
  14.    var valueSelected = this.value;
  15.    if(valueSelected == 2){
  16.      $("#idcardlama").show();
  17.    }else{
  18.      $("#idcardlama").hide();
  19.    }
  20. });
  21. });
  22. </script>
  23. </head>
  24. <body>
  25.  
  26. <label>Status Pengajuan :</label>
  27. 	<select id='show' class="form-control" name="status" type="text" id="status">
  28. 		<option value='1'>Pengajuan Baru</option>
  29. 		<option value='2'>Pengajuan Perpanjangan</option>
  30. 	</select>
  31. </div>
  32.  
  33. <div class="form-group">
  34.  <form action="status_kerja"> 
  35. <p>Tanggal MCU Terakhir :<input type="date" name="tgl_mcu_akhir">  </p></div>
  36. <div id="idcardlama" class="form-group">
  37. <p>Expired ID Card Lama : 
  38.   <input type="date" name="expired_idcardlama"></p>
  39. </div> 
  40. <div class="form-group">
  41. <p>Pengajuan Section ke HR : <input type="date" name="pengajuansc_hr" />
  42. </p></div>
  43. <div class="form-group">
  44. <p>Pengajuan ke Berau Coal : <input type="date" name="pengajuanke_bc" />
  45. </p></div>
  46. <div class="form-group">
  47. <p>Diterima dari Berau Coal : <input type="date" name="diterimadari_bc" />
  48. </p></div>
  49. <div class="form-group">
  50. <p>Expired ID Card Baru : <input type="date" name="expired_idcardbaru" />
  51. </p></div>
  52. <div class="form-group">
  53. <p>Diberikan kepada pemiliknya : <input type="date" name="diberikanpd_user" />
  54. </p>
  55. </div>
  56.  
  57. <div class="form-group">Report : 
  58.   <select class="form-control" name="report" id="report" required="">
  59.     <option>Aktif</option>
  60.     <option>Expired</option>
  61.   </select>
  62. </div>   
  63.  
  64. <button type="submit" class="btn btn-primary" name="tambah" id="tambah">Tambah</button>
  65. <button type="reset" class="btn btn-default">Batal</button>
  66. </form>
  67.  
  68. </body>
  69. </html>
Nian Dwi Christianto SW
commented on 05 Jun 2018 08:29:16		 
  1. Assalam,.. JOSS !! Trima kasih :D
Nian Dwi Christianto SW
commented on 05 Jun 2018 09:18:29		 
  1. Selamat siang, Masih dengan case yang sama kali ini saya ingin membuat suatu tanggal dengan desain javascript kalender jquery-ui 3.3.1. 
  2.  
  3. Mohon pencerahannya ? terima kasih
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase