show select checkbox looping from ajax and codeigniter - php

Question

i want to show checkbox looping from db, if i try to select data id_kendaraan in field then show the data from that id.
this my view code:
<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 class="modal-title" id="myModalLabel">Tambah Pemeliharaan</h3>
</div>
<form class="form-horizontal" method="post" action="<?php echo base_url()?>Data/Pemeliharaan/Tambah">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Nama Kendaraan</label>
<div class="col-xs-8">
<select class="form-control" name="id_kendaraan" id="id_kendaraan" required>
<option>Pilih Kendaraan</option>
<?php
if(!empty($kendaraan_)) {
foreach ($kendaraan_ as $isi) {
?>
<option value="<?php echo $isi['id_kendaraan']?>"><?php echo $isi['nama']?> - <?php echo $isi['platno']?></option>
<?php }} ?>
</select>
</div>
</div>
<?php
$index =0;
foreach ($subkriteria_ as $kr_key => $kriteria) {
?>
<div class="form-group">
<label class="control-label col-xs-3"><?php echo $kriteria['nama_kriteria'] ?></label>
<div class="col-xs-8">
<input type="hidden" name="status_pemeliharaan" value="1" class="form-control">
<input type="hidden" name="id_kriteria[]" value="<?php echo $kriteria['id_kriteria'] ?>" class="form-control">
<?php if(!empty($kriteria['sub'])) { ?>
<select class="form-control" name="isi_kriteria[]" required>
<option>Pilih Sub Kriteria</option>
<?php $no = 1; foreach ($kriteria['sub'] as $data) { ?>
<option value="<?php echo $data['value'] ?>"><?php echo $data['namasubkriteria'] ?> - <?php echo $data['value'] ?></option>
<?php $no++; } ?>
</select>
<?php } else if($kriteria['link']=='tahun_beli') { ?>
<input name="isi_kriteria[]" value="" class="form-control" type="text" placeholder="Isi Kriteria..." readonly required>
<?php } else { ?>
<input name="isi_kriteria[]" value="" class="form-control" type="number" placeholder="Isi Kriteria..." required>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="form-group">
<label class="control-label col-xs-3">tes</label>
<div class="col-xs-8">
<input type="checkbox" name="id_sparepart[]" value=""> //my trouble
<input type="text" name="sparepart" value=""> //my trouble
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
<button class="btn btn-info">Submit</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#id_kendaraan').on('input',function(){
var id_kendaraan=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
dataType : "JSON",
data : {id_kendaraan: id_kendaraan},
cache:false,
success: function(data){
$.each(data,function(id_kendaraan, tahun_beli, jenis){
$('[name="isi_kriteria[]"]').val(data.tahun_beli);
$('[name="id_jenis"]').val(data.id_jenis);
$('[name="id_sparepart[]"]').val(data.id_sparepart); //my trouble
$('[name="sparepart"]').val(data.sparepart); //my trouble
});
}
});
return false;
});
});
</script>
on this code, if I select a kendaraan from the select form then data appears according to the selected kendaraan.
it is working, but on the checkbox not show data sparepart for looping from database.
this my controller:
function GetKendaraanById(){
$id_kendaraan=$this->input->post('id_kendaraan');
$data=$this->PemeliharaanModel->GetById($id_kendaraan); ;
echo json_encode($data);
}
i get data from view $id_kendaraan for my parameter.
this my model:
function GetById($id_kendaraan){
$this->db->select('*');
$this->db->from('tb_kendaraan');
$this->db->join('tb_sparepart', 'tb_sparepart.id_jenis = tb_kendaraan.id_jenis');
$this->db->where('tb_kendaraan.id_kendaraan',$id_kendaraan);
$query = $this->db->get();
if($query->num_rows() > 0)
{
foreach ($query->result() as $data) {
$hasil=array(
'tahun_beli' => $data->tahun_beli,
'id_jenis' => $data->id_jenis,
'id_sparepart' => $data->id_sparepart,
'sparepart' => $data->sparepart,
);
}
}
return $hasil;
}
field tahun_beli, id jenis is success to showing in the view.
but the checkbox from sparepart is not looping just show one data.
after selecting the nama kendaraan the checkbox should appear according to the type of kendaraan, data circled in the image should appear more checkbox
thx for helping me

Answer 1

You should separate the query on your model because it has a different format to show (I assume you want to get one kendaraan data with multiple sparepart data) :
function GetById($id_kendaraan){
$this->db->select('*');
$this->db->from('tb_kendaraan');
$this->db->where('tb_kendaraan.id_kendaraan',$id_kendaraan);
$query_kendaraan = $this->db->get();
$hasil = false;
if($query_kendaraan->num_rows() > 0)
{
$data_kendaraan = $query_kendaraan->row();
$hasil = [
'tahun_beli' => $data_kendaraan->tahun_beli,
'id_jenis' => $data_kendaraan->id_jenis,
'spareparts' => [] // empty array, to be filled with spareparts data
];
$this->db->select('*');
$this->db->from('tb_sparepart');
$this->db->where('tb_sparepart.id_jenis', $data_kendaraan->id_jenis);
$query_sparepart = $this->db->get();
foreach ($query_sparepart->result() as $data_sparepart) {
$spareparts = [
'id_sparepart' => $data_sparepart->id_sparepart,
'sparepart' => $data_sparepart->sparepart,
];
array_push($hasil['spareparts'], $spareparts);
}
}
return $hasil;
}
Then on the html side, try to modify the codes like this :
<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 class="modal-title" id="myModalLabel">Tambah Pemeliharaan</h3>
</div>
<form class="form-horizontal" method="post" action="<?php echo base_url()?>Data/Pemeliharaan/Tambah">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Nama Kendaraan</label>
<div class="col-xs-8">
<select class="form-control" name="id_kendaraan" id="id_kendaraan" required>
<option>Pilih Kendaraan</option>
<?php
if(!empty($kendaraan_)) {
foreach ($kendaraan_ as $isi) {
?>
<option value="<?php echo $isi['id_kendaraan']?>"><?php echo $isi['nama']?> - <?php echo $isi['platno']?></option>
<?php }} ?>
</select>
</div>
</div>
<?php
$index =0;
foreach ($subkriteria_ as $kr_key => $kriteria) {
?>
<div class="form-group">
<label class="control-label col-xs-3"><?php echo $kriteria['nama_kriteria'] ?></label>
<div class="col-xs-8">
<input type="hidden" name="status_pemeliharaan" value="1" class="form-control">
<input type="hidden" name="id_kriteria[]" value="<?php echo $kriteria['id_kriteria'] ?>" class="form-control">
<?php if(!empty($kriteria['sub'])) { ?>
<select class="form-control" name="isi_kriteria[]" required>
<option>Pilih Sub Kriteria</option>
<?php $no = 1; foreach ($kriteria['sub'] as $data) { ?>
<option value="<?php echo $data['value'] ?>"><?php echo $data['namasubkriteria'] ?> - <?php echo $data['value'] ?></option>
<?php $no++; } ?>
</select>
<?php } else if($kriteria['link']=='tahun_beli') { ?>
<input name="isi_kriteria[]" value="" class="form-control" type="text" placeholder="Isi Kriteria..." readonly required>
<?php } else { ?>
<input name="isi_kriteria[]" value="" class="form-control" type="number" placeholder="Isi Kriteria..." required>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="form-group">
<label class="control-label col-xs-3">tes</label>
<div class="col-xs-8">
<ul id="sparepartList" style="list-style-type: none; padding: 0;"></ul>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
<button class="btn btn-info">Submit</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#id_kendaraan').on('input',function(){
var id_kendaraan=$(this).val();
$.ajax({
type : "POST",
url : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
dataType : "JSON",
data : {id_kendaraan: id_kendaraan},
cache:false,
success: function(data){
$('#sparepartList').empty(); // clear all sparepart checkboxes
$.each(data, function(id_kendaraan, tahun_beli, jenis){
$('[name="isi_kriteria[]"]').val(data.tahun_beli);
$('[name="id_jenis"]').val(data.id_jenis);
});
$.each(data.spareparts, function (key, value) {
let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
'<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
$('#sparepartList').append(li);
});
}
});
return false;
});
});
</script>
Notice that I changed the sparepart html inputs to an unordered list element, then loop the sparepart data retrieved from the ajax response inside it.

Answer 2

in Your model
$hasil=array(
'tahun_beli' => $data->tahun_beli,
'id_jenis' => $data->id_jenis,
'id_sparepart' => $data->id_sparepart,
'sparepart' => $data->sparepart,
);
U should Store data in $hasil by using []
$hasil[]=array(
'tahun_beli' => $data->tahun_beli,
'id_jenis' => $data->id_jenis,
'id_sparepart' => $data->id_sparepart,
'sparepart' => $data->sparepart,
);