Tutorial Codeigniter Membuat Input Data dengan Combo Auto Complete

Tutorial Codeigniter Membuat Input Data dengan Combo Auto Complete

Tutorial codeigniter kali ini akan membahas tentang bagaimana membuat form input data dengan menggunakan combo box dinamis dengan fungsi auto complete. Combo box auto complete pada form ini kita buat interactif change, ada dua combo box yang kita buat ketika kita memilih data di combo box yang utama isian di combo box yang kedua akan berubah secara otomatis tergantung dari nilai yang kita set dari tabel.

Isi dari combo box kita masukkan pada tabel. Jadi ada 2 tabel yang akan kita gunakan, tabel pertama berisi tabel induk sedangkan tabel ke dua berisi detail dari tabel pertama. Sebagi contoh kita buat tabel nama unit dengan isi POLI, sedangkan tabel ke dua kita isikan dua kolom berisi POLI, PERAWAT – POLI, DOKTER. Ketika kita memilih Poli UGD maka yang akan muncul di combo yang ke dua adalah perawat dan dokter.

Untuk mengubah isi dari combo yang kedua kita gunakan ajax agar load data terjadi otomatis. Ajax kita masukkan pada struktur codeigniter dan kita panggil pada kode controller yang kita buat di form input. Dengan menggunakan ajax tampilan dari combo kedua sebagai isi detail dari combo pertama bisa otomatis dan bisa kita rubah sesuai dengan keinginan kita.

</pre>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/daterangepicker.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-datetimepicker.min.css">
 
<script type="text/javascript">
function cekreg()
{
/*var noreg = $("#noreg").val();
$.ajax({
type: 'POST',
data: {noreg:noreg},
url : '<?php base_url();?>survei/carireg',
success: function (data) {
$("nama").html(data);
}
});*/
 
/*if($("#noreg").val()=="111")
{
$("#nama").val('masuk');
$("#ruang").focus();
return false;
}*/
}
 
function cekform()
{
if(!$("#tanggal").val())
{
alert('Tanggal tidak boleh kosong');
$("#tanggal").focus();
return false;
}
 
if(!$("#unit").val())
{
alert('Unit tidak boleh kosong');
$("#unit").focus();
return false;
}
 
if(!$("#petugas").val())
{
alert('Petugas tidak boleh kosong');
$("#petugas").focus();
return false;
}
 
/*
if(!$("#nama").val())
{
alert('nama tidak boleh kosong');
$("#nama").focus();
return false;
}
 
if(!$("#ruang").val())
{
alert('Ruangan tidak boleh kosong');
$("#ruang").focus();
return false;
}
 
if(!$("#mrs").val())
{
alert('Tanggal MRS tidak boleh kosong');
$("#mrs").focus();
return false;
}*/
 
}
</script>
 
<script type="text/javascript">
 
$(function(){
 
$.ajaxSetup({
type:"POST",
url: "<?php echo base_url('index.php/i_hh/ambil_data') ?>",
cache: false,
});
 
$("#unit").change(function(){
 
var value=$(this).val();
if(value>0){
$.ajax({
data:{id:value},
success: function(respond){
$("#petugas").html(respond);
}
})
}
 
});
 
})
 
</script>
 
<form class="form-horizontal" method="POST" action="<?php echo base_url();?>index.php/i_hh/cek">
<div class="row">
<div class="col-md-10">
 
<?php
$info = $this->session->flashdata('info');
if(!empty($info))
{
echo $info;
}
?>
 
<div class="widget-box widget-xs">
<div class="widget-header widget-xs">
<h4 class="widget-title">Form Input</h4>
 
<div class="widget-toolbar">
<a href="#" data-action="collapse">
<i class="ace-icon fa fa-chevron-up"></i>
</a>
 
<a href="#" data-action="fullscreen">
<i class="ace-icon fa fa-expand"></i>
</a>
</div>
</div>
 
<div class="widget-body widget-xs">
<div class="widget-main padding-1">
 
<div class="form-group form-group-sm">
<label for="tanggal" class="col-sm-3 control-label">User</label>
<div class="col-sm-6">
<div class="input-group" >
<input class="form-control" name="user_entry" type="text" value = "<?php echo $user_entry;?>" disabled>
</div>
</div>
</div>
 
<div class="form-group form-group-sm">
<label for="tanggal" class="col-sm-3 control-label">Tanggal</label>
<div class="col-sm-2">
<!--input type="text" class="form-control" id="mrs" placeholder="MRS" name="mrs" value=""-->
 
<div class="input-group">
<input class="form-control date-picker" id="tanggal" name="tanggal" type="text" data-date-format="dd-mm-yyyy" value = "<?php echo $tanggal; ?>" >
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
 
</div>
</div>
 
<div class="form-group form-group-sm">
<label for="unit" class="col-sm-3 control-label">Pilih Unit Layanan</label>
<div class="col-sm-6">
<div class="input-group" >
<select class="form-control" name="unit" id="unit">
<option value="">--Pilih Unit--</option>
<?php foreach($unit as $l){ ?>
<option value="<?php echo $l['IDUNIT']; ?>"><?php echo $l['NAMAUNIT']; ?> </option>
<?php } ?>
</select>
 
</div>
</div>
</div>
 
<div class="form-group form-group-sm">
<label for="unit" class="col-sm-3 control-label">Pilih Petugas</label>
<div class="col-sm-6">
<div class="input-group" >
<select class="form-control" name="petugas" id='petugas'>
<option value='0'>--pilih--</option>
</select>
 
</div>
</div>
</div>
 
<div class="form-group form-group-sm">
<label for="unit" class="col-sm-3 control-label">Pilih Tindakan</label>
<div class="col-sm-6">
<div class="input-group" >
<select class="form-control" name="tindakan">
<option value="">--Pilih Tindakan--</option>
<?php foreach($tindakan as $l){ ?>
<option value="<?php echo $l['IDTINDAKAN']; ?>"><?php echo $l['NAMATINDAKAN']; ?> </option>
<?php } ?>
</select>
 
</div>
</div>
</div>
 
<div class="form-group form-group-sm">
<label for="tanggal" class="col-sm-3 control-label">MOMENT</label>
<div class="col-sm-6">
<input type="checkbox" value='1' name='M1'>M1   
<input type="checkbox" value='1' name='M2'>M2   
<input type="checkbox" value='1' name='M3'>M3   
<input type="checkbox" value='1' name='M4'>M4   
<input type="checkbox" value='1' name='M5'>M5
</div>
</div>
 
</div>
</div>
</div>
 
<button type="submit" class="btn btn-primary btn-sm" name="tombol" value="simpan" onclick="return cekform();">Simpan</button>
<a href="<?php echo base_url();?>index.php/i_hh/list_data" class="btn btn-info btn-sm">List Data</a>
 
<table id="dynamic-table" class="table table-responsive table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center; word-wrap:break-word;" >NO</th>
<th style="text-align:center; word-wrap:break-word;" >TANGGAL</th>
<th style="text-align:center; word-wrap:break-word;" >UNIT</th>
<th style="text-align:center; word-wrap:break-word;" >PROFESI</th>
<th style="text-align:center; word-wrap:break-word;" >TINDAKAN</th>
<th style="text-align:center; word-wrap:break-word;" >M1</th>
<th style="text-align:center; word-wrap:break-word;" >M2</th>
<th style="text-align:center; word-wrap:break-word;" >M3</th>
<th style="text-align:center; word-wrap:break-word;" >M4</th>
<th style="text-align:center; word-wrap:break-word;" >M5</th>
<th style="text-align:center; word-wrap:break-word;" >USER</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($data->result() as $row)
{
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $row->TANGGAL; ?></td>
<td><?php echo $row->NAMAUNIT; ?></td>
<td><?php echo $row->NAMAPROFESI; ?></td>
<td><?php echo $row->NAMATINDAKAN; ?></td>
<td><?php echo $row->M1; ?></td>
<td><?php echo $row->M2; ?></td>
<td><?php echo $row->M3; ?></td>
<td><?php echo $row->M4; ?></td>
<td><?php echo $row->M5; ?></td>
<td><?php echo $row->USER_ENTRY; ?></td>
<td>
<a href="<?php echo base_url();?>index.php/i_hh/delete/<?php echo $row->id;?>" onclick="return confirm('anda yakin akan menghapus data??')"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
</tr>
<?php
$no+=1;
}//end FOR..
?>
 
</tbody>
<tfoot>
</tfoot>
 
</table>
 
</div>
</div>
 
</form>
 
<script src="<?php echo base_url();?>assets/js/bootstrap-datepicker.min.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap-timepicker.min.js"></script>
<script src="<?php echo base_url();?>assets/js/daterangepicker.min.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap-datetimepicker.js"></script>
 
<script type="text/javascript">
 
jQuery(function($) {
 
//datepicker plugin
//link
$('.date-picker').datepicker({
autoclose: true,
todayHighlight: true
})
//show datepicker when clicking on the icon
.next().on(ace.click_event, function(){
$(this).prev().focus();
});
 
//or change it into a date range picker
$('.input-daterange').datepicker({autoclose:true});
 
 
//to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
$('input[name=date-range-picker]').daterangepicker({
'applyClass' : 'btn-sm btn-success',
'cancelClass' : 'btn-sm btn-default',
locale: {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
}
})
.prev().on(ace.click_event, function(){
$(this).next().focus();
});
 
 
$('#timepicker1').timepicker({
minuteStep: 1,
showSeconds: true,
showMeridian: false,
disableFocus: true,
icons: {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
}
}).on('focus', function() {
$('#timepicker1').timepicker('showWidget');
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
 
 
 
 
if(!ace.vars['old_ie']) $('#date-timepicker1').datetimepicker({
format: 'MM/DD/YYYY h:mm:ss A',//use this option to display seconds
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-arrows ',
clear: 'fa fa-trash',
close: 'fa fa-times'
}
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
 
});
</script>
<pre>
Source Code Bridging BPJS dengan simrs

Source Code Bridging BPJS dengan simrs tutorial php lengkap untuk bridging bpjs dengan simrs agag sulit kita dapatkan diinternet. Namun Read more

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik Codeigniter adalah salah satu framework yang bisa digunakan untuk membuat aplikasi dengan menggunakan Read more

Source Code Aplikasi PHP Gratis untuk Mengelola Berkas di Tempat Kerja

Source Code Aplikasi PHP Gratis untuk Mengelola Berkas di Tempat Kerja Aplikasi ini berfungsi untuk mengelompokkan file document secara digital Read more

Download PHP Sistem Pakar Penyakit Manusia Berbasis Web

Download PHP Sistem Pakar Penyakit Manusia Berbasis Web Sistem pakar atau dalam bahasa Inggris disebut dengan Expert System adalah sebuah Read more

Leave a Reply

Your email address will not be published.

© 2021 javacposjavacpos.com ALL RIGHT RESERVED