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

belajar modal lookup pada bootstrap

Dibuat
Login Terakhir 2 Tahun lalu,
Telah Dilihat 4351 Kali
Andi rais denny Mengatakan : Sultan Account
  1. Ass. mohon bantunya, rekan2 forum php.com, Pak Robby
  2. ini scriptnya
  3.  
  4. <!doctype html>
  5. <html>
  6. <head>
  7. <title>LATIHANKU</title>
  8. <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
  9. <link rel="stylesheet" href="datatables/dataTables.bootstrap.css"/>
  10. <style>
  11. body{
  12. margin: 15px;
  13. }
  14. .pilih:hover{
  15. cursor: pointer;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="row">
  21. <div class="col-md-5">
  22. <h2>LATIHANKU</h2>
  23. </div>
  24. </div>
  25. <form action="action" onsubmit="dummy();
  26. return false">
  27. <div class="form-group">
  28. <label for="varchar">Kode Obat</label>
  29. <div class="row">
  30. <div class="col-md-4">
  31. <input type="text" class="form-control" name="kode_obat" id="kode_obat" placeholder="Kode Obat" readonly="" />
  32. </div>
  33. <div class="col-md-2">
  34. <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
  35. </div>
  36. </div>
  37. </div>
  38.  
  39. <input type="submit" value="Simpan" class="btn btn-primary" />
  40. </form>
  41.  
  42. <!-- Modal -->
  43. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  44. <div class="modal-dialog" style="width:800px">
  45. <div class="modal-content">
  46. <div class="modal-header">
  47. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  48. <h4 class="modal-title" id="myModalLabel">Lookup Kode Obat</h4>
  49. </div>
  50. <div class="modal-body">
  51. <table id="lookup" class="table table-bordered table-hover table-striped">
  52. <thead>
  53. <tr>
  54. <th>Kode Obat</th>
  55. <th>Nama Obat</th>
  56. </tr>
  57. </thead>
  58. <tbody>
  59. <?php
  60. //Data mentah yang ditampilkan ke tabel
  61. $con = mysqli_connect('localhost', 'root', '', 'obat');
  62. $sql = mysqli_query($con,'SELECT * FROM obat');
  63. while ($r = mysqli_fetch_array($sql)) {
  64. ?>
  65. <tr class="pilih" data-kodeobat="<?php echo $r['kode_obat'];?>">
  66. <td><?php echo $r['kode_obat']; ?></td>
  67. <td><?php echo $r['nama_obat']; ?></td>
  68. </tr>
  69. <?php
  70. }
  71. ?>
  72. </tbody>
  73. </table>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <script src="js/jquery-1.11.2.min.js"></script>
  79. <script src="bootstrap/js/bootstrap.js"></script>
  80. <script src="datatables/jquery.dataTables.js"></script>
  81. <script src="datatables/dataTables.bootstrap.js"></script>
  82. <script type="text/javascript">
  83.  
  84. // jika dipilih, kode obat akan masuk ke input dan modal di tutup
  85. $(document).on('click', '.pilih', function (e) {
  86. document.getElementById("kode_obat").value = $(this).attr('data-kodeobat');
  87. $('#myModal').modal('hide');
  88. });
  89.  
  90.  
  91. // tabel lookup obat
  92. $(function () {
  93. $("#lookup").dataTable();
  94. });
  95.  
  96. function dummy() {
  97. var kode_obat = document.getElementById("kode_obat").value;
  98. alert('kode obat ' + kode_obat + ' berhasil tersimpan');
  99. }
  100. </script>
  101. </body>
  102. </html>
  103.  
  104. DB
  105. __________________________________
  106. id_obat | nama_obat | Jenis Obat|
  107. __________________________________
  108. GNRK01| simvastatin | Generik |
  109.  
  110. yang aq mau tanyain bgaimana cara ketika data pada modal dipilih maka yang tampil data id_obat dan nama_obat,, pada 2 text box yang berbeda,,, mohon bantunya
Ada 1 File Kiriman :
1. Untitled47.png (16 KB)

Ada 1 Jawaban

Yakobus sutejo
commented on 10 Mei 2017 19:00:43
  1. Kira-kira seperti ini ya:
  2. 1. Ubah bagian form input menjadi :
  3. <div class="col-md-4">
  4. <input type="text" class="form-control" name="kode_obat" id="kode_obat" placeholder="Kode Obat" readonly="" /><br />
  5. <input type="text" class="form-control" name="nama_obat" id="nama_obat" placeholder="Nama Obat" readonly="" />
  6. </div>
  7.  
  8. 2. Ubah bagian ini <tbody> menjadi :
  9. <tr class="pilih" data-kodeobat="<?php echo $r['kode_obat'];?>"
  10. class="pilih" data-namaobat="<?php echo $r['nama_obat'];?>">
  11. <td><?php echo $r['kode_obat']; ?></td>
  12. <td><?php echo $r['nama_obat']; ?></td>
  13. </tr>
  14.  
  15. 3. Terakhir ubah bagian script modal :
  16. // jika dipilih, kode obat akan masuk ke input dan modal di tutup
  17. $(document).on('click', '.pilih', function (e) {
  18. document.getElementById("kode_obat").value = $(this).attr('data-kodeobat');
  19. document.getElementById("nama_obat").value = $(this).attr('data-namaobat');
  20. $('#myModal').modal('hide');
  21. });
  22.  
  23. 4. Selesai.
  24. 5. Ups.. kalau kode obat nama field-nya bukan kode_obat ganti aja jadi id_obat...
  25. 6. HTH
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!