I need a help to fix my dependent drop down list cloning problem. i have these three fields, 1.country_name,2.store_model,3.location_list, and on selecting country_name the store_model will populate and on selecting store_model the location lists will populate. this is working fine, but when i try to clone and append a row, the appended dropdown is not working properly. in the appended dropdown, the values are displaying based on the original dropdown selection.
this is my PHP page
<!-- BEGIN FORM-->
<form action="functions.php" method="post" enctype="multipart/form-data"
class="form-horizontal form_emp" id="form_sample_3" novalidate="novalidate">
<div class="form-body">
<input type="hidden" class="form-control" value="<?php echo $id;?>" name="id">
<input type="hidden" class="form-control" value="<?php echo $sp_id;?>" name="sp_id">
<input type="hidden" class="form-control tot_in" value="0" name="total_in">
<div class="row">
<div class="col-md-12">
<div class="table-scrollable">
<table class="table table-bordered edit-table">
<thead>
<tr>
<th width="10%"> # </th>
<th width="20%"> Country </th>
<th width="20%"> Store Model</th>
<th width="20%"> Loaction</th>
<th width="30%"> Update Comments </th>
</tr>
</thead>
<tbody id="items-row">
<?php
if(empty($userdata)):
?>
<tr class="item-row">
<td>
<a title="Remove row" href="javascript:;" class="dodelete delete btn red btn-outline">
<i class="fa fa-trash-o"></i></a></td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control country_name" name="country_name[]">
<?php $q=mysql_query("SELECT `id`,`country_name` FROM `db_country` WHERE id in (select distinct country_id from db_locations where location_id in (select location_id from db_sp where sp_id=$sp_id)) ");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['id'],$country_name)?"selected":"")." value='".$res['id']."'>".$res['country_name']."</option>";
}?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control store_model" name="store_model[]">
<?php
$q=mysql_query("SELECT `id`,`store_model` FROM `db_store_model` WHERE id in (select distinct store_model_id from db_locations where location_id in (select location_id from db_sp where sp_id=$sp_id)) ");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['id'],$store_model)?"selected":"")." value='".$res['id']."'>".$res['store_model']."</option>";
}?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control location_list" name="location_list[]">
<?php
if(!empty($id)){
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE location_id in (select location_id from db_sp where sp_id=$sp_id)");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['location_id'],$location_list)?"selected":"")." value='".$res['location_id']."'>".$res['location_name']."</option>";
}}?>
</select>
<div class="form-control-focus loading"> </div>
</td>
<td align="centre" class="form-group form-md-line-input">
<input type="text" class="form-control" name="comments[]"></td>
</tr>
<?php
else:
$count=count($sp_detail);
for($i=0; $i<$count;$i++){
?>
<tr class="item-row">
<a title="Remove row" href="javascript:;" class="dodelete delete btn red btn-outline">
<i class="fa fa-trash-o"></i></a></td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control country_name" name="country_name[]">
<option value="">Select Any</option>
<?php foreach($country_name as $key=>$cname){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['country_name']==$key?"selected":"");?>><?php echo $cname ;?></option>
<?php }?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control store_model" name="store_model[]">
<option value="">Select Any</option>
<?php foreach($store_model as $key=>$smodel){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['store_model']==$key?"selected":"");?>><?php echo $smodel ;?></option>
<?php }?>
<div class="form-control-focus loading"> </div>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control location_list" name="location_list[]">
<option value="">Select Any</option>
<?php foreach($location_list as $key=>$loclist){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['location_list']==$key?"selected":"");?>><?php echo $loclist ;?></option>
<?php }?>
</select>
<div class="form-control-focus loading"> </div>
</td>
</tr>
<?php
}
endif;
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a title="Add a row" href="javascript:;" class="addrow btn blue btn-outline">Add a row</a>
</div>
<div class="col-md-8 invoice-block text-right">
<div class="form-group form-md-line-input">
<label class="col-md-3 control-label" for="form_control_1">Update Type
<span class="required">*</span>
</label>
<div class="col-md-6">
<select class="form-control" name="event_status">
<option value="1">Update</option>
</select>
<div class="form-control-focus"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<button type="submit" name="action" value="update_event" class="btn green">Submit</button>
<button type="reset" class="btn default reset">Reset</button>
</div>
</div>
</div>
</form>
<!-- END FORM-->
this is my functions.php
if(isset($_POST['action'])&& $_POST['action']=='selectUpdate'){
$post=$_POST;
$country_id=json_encode($post['country_name']);
$country_ids=join(',',$post['country_name']);
$sp_id=$post['sp_id'];
$store_model_id=json_encode($post['store_model']);
$store_model_ids=join(',',$post['store_model']);
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE country_id in ($country_ids) and store_model_id in ($store_model_ids) and location_id in (select location_id from db_sp where sp_id=$sp_id)order by country_id,store_model_id");
$qno=mysql_num_rows($q);
if($qno>0){
while($res=mysql_fetch_array($q)){
echo "<option value='".$res['location_id']."'>".$res['location_name']."</option>";
}
}
else{
echo "<option value=''>No Data</option>";
}
}
this is my JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.dodelete',function(){
if($('.edit-table #items-row').find('tr').length > 1) { $(this).parents('tr').remove(); }
else{alert('All rows cant be deleted');}
});
var setSelectsEvents = function(rowElement) {
$(rowElement).on('change', '.country_name,.store_model', function(){
var store_model=$(rowElement).find('.store_model')[0].value;
var country_name=$(rowElement).find('.country_name')[0].value;
var sp_id=<?php echo $sp_id ?>;
//var store_model=$(this).val();
$('.loading').html('<img src="layouts/layout/img/loading.gif"/>');
$.ajax({
type: 'post',
url: 'functions.php',
data: {
sp_id:<?php echo $sp_id ?>,store_model:store_model,country_name:country_name, action:"selectUpdate",
},
success: function (res) {
$('.loading').html("");
$($(rowElement).find('.location_list')[0]).html(res);
$('#my_multi_select1').multiSelect();
}
});
});
};
setSelectsEvents('.item-row');
$('.addrow').click(function(){
var elem = $('#items-row').find('tr:first').clone();
var appendedRow = $('#items-row').append(elem).children(':last-child');
setSelectsEvents(appendedRow);
});
$(document).on('click','.reset',function(){
emptyTable();
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
startDate: 'dateToday',
//startDate: '+15d',
autoclose: true
});
});
im not good at JavaScript, somewhere i am making mistake. please help.
I think it has some event handler like $('select.coutry_name').on('change', ...
But these event handlers are not set cloned rows selects.
So it will work fine selects event handler part and $('.addrow').click change to like following.
// **UPDATED JavaScript**
<script>
$(document).ready(function(){
$(document).on('click','.dodelete',function(){
if($('.edit-table #items-row').find('tr').length > 1) { $(this).parents('tr').remove(); }
else{alert('All rows cant be deleted');}
});
var setSelectsEvents = function(rowElement) {
$(rowElement).on('change', '.country_name,.store_model', function(){
var store_model=$($(rowElement).find('.store_model')[0]).val();
var country_name=$($(rowElement).find('.country_name')[0]).val();
var sp_id=<?php echo $sp_id ?>;
//var store_model=$(this).val();
$('.loading').html('<img src="layouts/layout/img/loading.gif"/>');
var data = {
sp_id:1,store_model:store_model,country_name:country_name, action:"selectUpdate",
};
$('.loading').html('<img src="/images/loading.gif"/>');
$.ajax({
type: 'post',
url: 'functions.php',
data: JSON.stringify(data),
contentType: 'application/JSON',
dataType : 'JSON',
success: function (res) {
$('.loading').html("");
$($(rowElement).find('.location_list')[0]).html(res);
$('#my_multi_select1').multiSelect();
}
});
});
};
setSelectsEvents('.item-row');
$('.addrow').click(function(){
var elem = $('#items-row').find('tr:first').clone();
var appendedRow = $('#items-row').append(elem).children(':last-child');
setSelectsEvents(appendedRow);
});
$(document).on('click','.reset',function(){
emptyTable();
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
startDate: 'dateToday',
//startDate: '+15d',
autoclose: true
});
});
</script>
It is posted data in JSON, has to decode JSON data on PHP.
if(isset($_POST['action'])&& $_POST['action']=='selectUpdate'){
$post=json_decode($_POST, true);
//$country_id=json_encode($post['country_name']); //not used
$country_ids=is_array($post['country_name']) ? join(',',$post['country_name']) : $post['country_name'];
$sp_id=$post['sp_id'];
//$store_model_id=json_encode($post['store_model']); //not used
$store_model_ids=is_array($post['store_model']) ? join(',',$post['store_model']) : $post['store_model'];
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE country_id in ($country_ids) and store_model_id in ($store_model_ids) and location_id in (select location_id from db_sp where sp_id=$sp_id)order by country_id,store_model_id");
$qno=mysql_num_rows($q);
if($qno>0){
while($res=mysql_fetch_array($q)){
echo "<option value='".$res['location_id']."'>".$res['location_name']."</option>";
}
}
else{
echo "<option value=''>No Data</option>";
}
}
Related
my edit and delete query only work on the first page of datatables, but not on the second page.
i'm using ajax and jquery. i'm new and this is for my project in college. thanks for helping me.
here's the code.
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<button type="button" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</button>
</br>
</br>
<?php include"alert.php"; ?>
<table id="example1" class="table table-bordered table-striped" >
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Nama Toko</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT username, password, level, nama_lengkap, status, nama_toko FROM master_user INNER JOIN master_toko ON master_user.id_toko = master_toko.id_toko where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td><?php echo $data['nama_toko']; ?></td>
<td>
</span>Edit |
</span>Hapus
</td>
</tr> <?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- FOR EDIT AND DELETE -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
and this is for edit
i reference the username because username is my primary key
here the code
include "connection.php";
$username = $_GET['username'];
echo $username;
$ambildata = mysqli_query($connection,"select * from master_user where username='$username'");
while($row= mysqli_fetch_array($ambildata)){
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="proses_edituser.php" name="modal-popup" enctype="multipart/form-data" method="POST" id="form-edit">
<div class="form-group">
<label class=" control-label col-md-3">Username</label>
<div class="col-md-9">
<input class="form-control" type="text" name="username" value="<?php echo $row['username']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Nama Lengkap</label>
<div class="col-md-9">
<input class="form-control" type="text" name="nama_lengkap" value="<?php echo $row['nama_lengkap']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input class="form-control" type="password" name="password" value="<?php echo $row['password']; ?>"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value=''>--Select--</option>
<option value='owner' <?php if ($row['level']=='owner'){echo"SELECTED";}?>>Owner</option>
<option value='manajer' <?php if($row['level'] == 'manajer'){ echo "SELECTED"; } ?>>Manajer</option>
<option value='bendahara' <?php if($row['level'] == 'bendahara'){ echo "SELECTED"; } ?> >Bendahara</option>
<option value='administrator' <?php if($row['level'] == 'administrator'){ echo "SELECTED"; } ?>>Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Toko</label>
<div class="col-md-9">
<select name="id_toko" class="form-control">
<option value="">-- Pilih Toko --</option>
<?php
require "connection.php";
$datatoko = "SELECT * FROM master_toko ORDER BY id_toko ASC";
$resultsql = mysqli_query($connection, $datatoko);
if (mysqli_num_rows($resultsql) > 0) {
while ($row = mysqli_fetch_assoc($resultsql)) {
echo "<option value='$row[id_toko]'>$row[nama_toko]</option>";
// $nama_toko = $row['nama_toko'];
//echo '<option value="'.$row['id_toko'].'">'. $nama_toko.'</option>';
}
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" value="Simpan"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</div>
</form>
<?php
}
?>
</div>
</div>
</div>
The issue is because the html for these buttons are rendered again & previous event attached to these are not found. So you need to add the events for newly elements also. One good solution is to use jQuery on method to attach the event on dynamic elements as well. Use the below code to check
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_modal', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_delete', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
I want to load a php code in a page called index (parent page). The problem occurs when you press the filter button because the page does not load correctly (it also loads the parent page) and it does not show me the selected data from the form that I will want to query in the database.
The index page have the code:
<div class="row">
<div class="col-12">
<div class="card">
<div class="row mt-3">
<div class="col-md-1"></div>
<div class="col-md-4">
<select name="class" id="class_id" class="form-control select2" data-toggle = "select2" required>
<option value=""><?php echo get_phrase('select_a_class');?></option>
<?php
$classes = $this->db->get('classes')->result_array();
foreach($classes as $row):
?>
<option value="<?php echo $row['id'];?>"
<?php if ($class_id == $row['id']) echo 'selected';?>>
<?php echo $row['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
<div class="col-md-4">
<select name="exam" id="exam_id" class="form-control select2" data-toggle = "select2" required>
<option value=""><?php echo get_phrase('select_a_exam');?></option>
<?php
$exams = $this->db->get_where('exams' , array('session' => active_session()))->result_array();
foreach($exams as $row):
?>
<option value="<?php echo $row['id'];?>"
<?php if ($exam_id == $row['id']) echo 'selected';?>>
<?php echo $row['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-block btn-secondary" onclick="filter()" ><?php echo get_phrase('filter'); ?></button>
</div>
</div>
<div class="card-body tabulation_content">
<div class="empty_box">
<img class="mb-3" width="150px" src="<?php echo base_url('assets/backend/images/empty_box.png'); ?>" />
<br>
<span class=""><?php echo get_phrase('no_data_found'); ?></span>
</div>
</div>
</div>
</div>
</div>
The list page that i want to load
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<td ><?php echo $exam_id?></td>
<td ><?php echo $class_id?></td>
<td >333</td>
</tr>
</thead>
</table>
</div>
</div>
The JavaScript filter
<script>
$('document').ready(function(){
initSelect2(['#class_id', '#exam_id']);
});
function filter(){
var exam = $('#exam_id').val();
var class_id = $('#class_id').val();
if(class_id != "" && exam != "" ){
$.ajax({
type: 'POST',
url: '<?php echo route('tubulation/list/') ?>',
data: {class_id : class_id, exam : exam},
success: function(response){
$('.tabulation_content').html(response);
}
});
}else{
toastr.error('<?php echo get_phrase('please_select_in_all_fields !'); ?>');
}
}
</script>
[You can see the result here on this picture]
I am using coordinator php framework with javascript and ajax. comma separated values is not show but single values working fine . i have table field like (edit_coach = 9,10,11), (edit_depot = 5,Spur,SPJ) and edit_task_type = 5 please share valuable idea...
database
edit_coach = 9,10,11 //not show data
edit_depot = 5,Spur,SPJ //not show data
edit_task_type = 5 //working fine
JavaScript Code here
function edit_assign_train(val)
{
$.ajax({
url: "<?php echo base_url(); ?>edit_assign_train",
type: "post",
data: "atrain_id="+val,
success: function (response)
{
var res = JSON.parse(response);
console.log(res);
$('#edit_train_no').val(res[0]['train_no']);
$('#edit_depot').val(res[0]['depot_id']+'-'+res[0]['depot_code']+'-'+res[0]['depot_name']).trigger('change');// not working
$('#edit_coach').val(res[0]['coach']).trigger('change');// not working
$('#edit_task_type').val(res[0]['task_type']).trigger('change');//working fine
$('#edit_tot_coach').val(res[0]['tot_coach']);
$('#edit_janitor').val(res[0]['janitor']);
$('#edit_time').val(res[0]['time_val']);
$('#edit_id').val(res[0]['id']);
}
});
HTML Code here
<div class="row">
<label class="col-sm-4 col-form-label text-right">Depot : </label>
<div class="col-sm-8">
<div class="form-group">
<select id="edit_depot" class="form-control">
<?php foreach ($depot_val as $list3) { ?>
<option value="<?php echo $list3['id'] ?>-<?php echo $list3['depot_code'] ?>-<?php echo $list3['depot_name'] ?>"><?php echo $list3['depot_name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Coaches : </label>
<div class="col-sm-8 pt-2">
<select class="form-control tasktype-select" id="edit_coach" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($coach_val as $list2) { ?>
<option value="<?php echo $list2['id'] ?>"><?php echo $list2['coach_name'] ?></option>
<?php } ?>
</select>
</div>
</div><br>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Task Type : </label>
<div class="col-sm-8">
<select class="form-control tasktype-select" id="edit_task_type" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($res_val as $list1) { ?>
<option value="<?php echo $list1['id'] ?>"><?php echo $list1['task_type'] ?></option>
<?php } ?>
</select>
</div>
</div>
Try this:
$('#edit_depot').val(res[0]['depot_id']).trigger('change');
Please help, I have trouble in this Jquery onclick at my form, Why my data from database can't show ? example, I choose a category "jantung", that should be show data dokter where category is jantung, but if I use onchange at the form it's work.
This is a html where I click the category (if click this category will show the modal)
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link" data-toggle="modal" href="#poliklinikModal1" onclick="hmm('<?=$row->id_poli?>')">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
<br>
<br>
</div>
<?php endforeach; ?>
And This
<script>
function hmm(idnya) {
$(document).ready(function(){
document.getElementById('poli').value=idnya;
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
</script>
The Modal
<?php echo form_open('hal_user/add/')?>
<div class="form-group">
<label>Nama</label>
<input type="hidden" name="id_pasien" class="form-control" readonly="" value="<?=$this->session->userdata('id_pasien') ;?>">
<input type="text" name="nama_pasien" class="form-control" readonly="" value="<?php echo $this->session->userdata('nama_pasien') ; ?>">
</div>
<div class="form-group">
<label>Poli</label>
<select name="id_poli" id="poli" class="form-control">
<option value="">Select Poli</option>
<?php foreach ($poli as $p): ?>
<option value="<?php echo $p->id_poli;?>"><?php echo $p->nama_poli;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Dokter</label>
<select name="id_dokter" id="dokter" class="form-control" disabled="">
<option value="">Select Dokter</option>
</select>
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" name="tanggal" placeholder="Pilih Tanggal">
</div>
<div class="form-group">
<label>Waktu</label>
<a class="btn btn-primary form-control" data-toggle="collapse" href="#waktuanak" role="button" aria-expanded="false" aria-controls="collapseExample">
Pilih Waktu
</a>
<div class="collapse" id="waktuanak">
<div class="card card-body">
<div class="btn-group-toggle" data-toggle="buttons">
<?php foreach ($waktu as $row) :?>
<label class="btn btn-outline-primary">
<input type="radio" name="id_waktu" autocomplete="off" value="<?php echo $row->id_waktu; ?>"><?php echo $row->waktu;?>
</label>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-wd">Simpan</button>
Batal
</div>
<?php echo form_close(); ?>
Try this
On your view file no need to call function and try to use data-attr and add a class hmm on
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link hmm" data-toggle="modal" href="#poliklinikModal1" data-attr="<?=$row->id_poli?>">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
</div>
<?php endforeach; ?>
On your jquery try this
<script>
$(document).ready(function(){
$('.hmm').on('click',function(){
var idnya = $(this).attr('data-attr');
$('#poli').val(idnya );
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
Updated
$("#poli option[value='" + idnya+ "']").prop("selected", true);
In my form select field I use ajax to list my options, but when submitting to the controller everything after space will be removed.
<div class="col-md-9">
<form class="" action="<?php echo base_url(); ?>Sms/add" method="post">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Compose New Message</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<input class="form-control" value="<?php echo set_value('title'); ?>" name="title" placeholder="Subject: 20 characters" maxlength="20">
</div>
<div class="form-group">
<textarea id="compose-textarea" name="message" class="form-control" style="height: 150px" placeholder=" Enter your message here: 150 characters" maxlength="150"><?php echo set_value('message'); ?></textarea>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck" value="company"> Send To Company's Database</label>
</div>
<div class="form-group">
<label><input type="radio" class="flat-red" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" value="ecofarmer"> Send To Ecofarmer Database</label>
</div>
<div id="ifYes" style="display:none" class="form-group">
<select class="form-control" name="database_name">
<option value="">Choose target</option>
<?php foreach ($databases as $item): ?>
<option value="<?php echo $item->db_id; ?>"><?php echo $item->db_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="ifNo" style="display:none">
<div class="form-group">
<select class="form-control" name="province" id="province">
<option value="">Choose Province</option>
<?php foreach ($provinces as $item): ?>
<option value="<?php echo $item->province_id; ?>"><?php echo $item->province_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<select class="form-control" name="district" id="district" disabled="disabled">
<option value="">Choose District</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="ward" id="ward" disabled="disabled">
<option value="">Choose Ward</option>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="pull-right">
<button type="submit" name="draft" class="btn btn-default" value="true"><i class="fa fa-pencil"></i> Draft</button>
<button type="submit" name="submit" class="btn btn-primary" value="true"><i class="fa fa-envelope-o"></i> Send</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
</div>
<!-- /.box-footer -->
</div>
<!-- /. box -->
</form>
Below is my JavaScript that I use for radio input and select options
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'inline';
}
else document.getElementById('ifYes').style.display = 'none';
if (document.getElementById('noCheck').checked) {
document.getElementById('ifNo').style.display = 'inline';
}
else document.getElementById('ifNo').style.display = 'none';
}
$('#province').change(function() {
var province = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_district'); ?>",
data:{pID:province},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("district").disabled = false;
var $el = $("#district");
$el.empty();
$el.append($("<option>Choose District</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.district_id+">"+value.district_name+"</option>";
$(div_data).appendTo('#district');
console.log(value.district_name);
});
}
});
});
$('#district').change(function() {
var district = this.value;
$.ajax({
url: "<?php echo base_url('Sms/get_ward'); ?>",
data:{dID:district},
type: 'post',
success: function(data){
var arr = JSON.parse(data);
document.getElementById("ward").disabled = false;
var $il = $("#ward");
$il.empty();
$il.append($("<option>Choose A Ward</option>"));
$.each($(arr),function(key,value){
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
$(div_data).appendTo('#ward');
console.log(value.ward_number);
});
}
});
});
Now when I'm submitting the value of the selection ward is being removed of everything after the space. How can I prevent that from happening?
The problem was on quotes
I changed the code below
var div_data="<option value="+value.ward_number+">"+value.ward_number+"</option>";
To this
var div_data = '<option value="' + value.ward_number + '">' + value.ward_number + '</option>';