Develop Reference

Load php files in parent files also stored data from form

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]

3 dynamic combobox use php and jquery

Need help...
How if I want to make 3 select options use jquery,
Parent
Child
Grandchild
Can anyone help?
I will appreciate your help...
This is my code:
<?php
$parentQuery = $db->query("SELECT * FROM kategori WHERE parent = 0 ORDER BY nama_kategori");
$kategori = ((isset($_POST['parent']) && !empty($_POST['parent']))?sanitize($_POST['parent']):'');
?>
<div class="form-group col-md-3">
<label for="parent">Kategori 1:</label>
<select class="form-control" id="parent" name="parent">
<option value="" <?php echo (($kategori =='')?'selected':''); ?>> Select</option>
<?php while($p = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?php echo $p['id_kategori'];?>" <?php echo (($kategori == $p['id_kategori'])?'selected=':''); ?>>
<?php echo $p['nama_kategori'];?>
</option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 2:</label>
<select class="form-control" name="child" id="child"></select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 3:</label>
<select class="form-control" name="grandchild" id="grandchild"></select>
</div>

javascript not working in dynamic form

i have a dynamic form that show data from database and a javascript code to show and hide some fields but the javascript code works only the first result
here is php code
<?php
$arr = select::mobiles($id);
foreach ($arr as $aa) { ?>
<div class="col-sm-10">
<div class="col-sm-2 bring_right">
<input type="hidden" name="p_name2[<?php $counter; ?>]"
value="<?php echo $aa['name']; ?>"><?php echo $aa['name'] ?>
</div>
<div class="col-sm-4 bring_right">
<input type="radio" id="general_radio" name="">
<label for="">general</label>
<input type="radio" onclick="showMe('variant', this)" id="variant_radio" name="">
<label for="">variant</label>
</div>
<div class="col-sm-6 bring_right" id="variant" style="display: none">
<?php
$branches = select::mobile_branches();
// print_r($branches);
foreach ($branches as $b) {
?>
<div class="col-sm-4 bring_right"><label for=""><?php echo $b['name'] ?></label></div>
<div class="col-sm-8">
<select class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="<?php echo $aa2['name'] ?>" style="direction:ltr">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
<?php } ?>
</div>
<div class="col-sm-3 bring_right" id="general">
<select multiple class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][
<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="
<?php echo $aa2['name'] ?>">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
</div>
<?php } ?>
and the javascript code is
<script type="text/javascript">
function showMe(it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
$('#general').hide();
}
</script>
any help please??

Hey I think I got your problem. In your code see this part
foreach ($arr as $aa) { ?>
......
<div class="col-sm-6 bring_right" id="variant" style="display: none">
Here you are having same id for multiple div just try following changes and you'll be able to do that
foreach ($arr as $key => $aa) { ?>
......
<input type="radio" onclick="showMe('variant<?php echo $key; ?>', this)" id="variant_radio" name="">
........
<div class="col-sm-6 bring_right" id="variant<?php echo $key; ?>" style="display: none">
Let me know if I am not getting your point or if it is not working.

how to pass the class_id with section_id both in ajax

I have 3 dependable dropdown boxes and first i select the class and it will select all the sections belong to that class. and when i select the respective section i want to get the students in that section...
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('class'); ?></label>
<div class="col-sm-9">
<select name="class_id" class="form-control selectboxit" id="classid" onchange="return get_student_section(this.value)">
<option value=""><?php echo get_phrase('select_class'); ?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach ($classes as $row):
print_r($classes);
?>
<option value="<?php echo $row['class_id']; ?>"><?php echo $row['name']; ?></option>
<?php endforeach; ?>
</select> </div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('section');?></label>
<div class="col-sm-5">
<select name="section_id" class="form-control" style="width:100%;"
id="student_selector_holder" onchange="get_class_section_students(this.value)">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select> </div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('student'); ?></label>
<div class="col-sm-9">
<select name="student_id" class="form-control" style="width:100%;" id="student_selection_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select> </div>
</div>
my ajax request looks alike this. what i want to do is when i select the section i want to trigger an ajax call with class_id and _section_id. this is my javascript code
function get_student_section(class_id) {
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_student_section/' + class_id,
success: function(response) {
jQuery('#student_selector_holder').html(response);
}
});
}
function get_class_section_students(section_id) {
//Get
var class_id = $('#class_id').val();
alert("bla" + bla);
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_class_students_by_section/' + class_id + section_id,
success: function(response) {
jQuery('#student_selection_holder').html(response);
}
});
}

since you use jquery - i would attach any event handler to the selected element via jQuerys "on" function instead of using "onchange" directly
i try to give you an approach which should work
the js Code
var app = window.app || {};
app.autoLoad = function()
{
app.dropdownBuilder.initialize();
};
app.dropdownBuilder =
{
initialize : function()
{
var that = this;
$("#classid").on("change", function() {
that.loadStudentSection($(this).val());
});
$("#student_selector_holder").on("change", function() {
that.loadClassSectionStudents($("#classid").val(), $(this).val());
});
},
loadStudentSection : function(class_id)
{
$.ajax({
url: app.constants.baseUrl+'index.php?admin/get_student_section/' + class_id +'/',
success: function(response)
{
$('#student_selector_holder').html(response);
}
});
},
loadClassSectionStudents : function(class_id, section_id)
{
$.ajax({
url: app.constants.baseUrl+'index.php?admin/get_class_students_by_section/' + class_id +'/'+ section_id+'/',
success: function(response) {
$('#student_selection_holder').html(response);
}
});
}
};
app.constants =
{
baseUrl : "<?=base_url(); ?>"
};
$(document).ready(function () {
app.autoLoad();
});
the view looked okay - i removed the onchange events
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('class'); ?></label>
<div class="col-sm-9">
<select name="class_id" class="form-control selectboxit" id="classid">
<option value=""><?php echo get_phrase('select_class'); ?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach ($classes as $row):
?>
<option value="<?php echo $row['class_id']; ?>"><?php echo $row['name']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('section');?></label>
<div class="col-sm-5">
<select name="section_id" class="form-control" style="width:100%;" id="student_selector_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><?php echo get_phrase('student'); ?></label>
<div class="col-sm-9">
<select name="student_id" class="form-control" style="width:100%;" id="student_selection_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select>
</div>
</div>

you have to pass only this in onchange function like onchange="get_class_section_students(this)"
and in JavaScript use section_id.value

SelectBox getID

I am trying to get the id of a selection of a select box, however was unable'm confused, can someone help me?
Code of Selectbox:
Edited SelectBox Code :
<li class="fields">
<div>
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId(<?php $this->getId() ?>)" <?php if (!is_null ($_e->getId())) { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
<div class="field">
<div class="form-group">
<label class="required" for="date"><?php echo $this->__('Date') ?><em>*</em></label>
<div class="input-box">
<div class="input-range input-date">
<?php echo $this->getDateInput($_e->getDate()) ?>
</div>
</div>
</div>
</div>
</div>
</li>
Edited Javascript
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}

if you want to get the id of the selected item then add an onchange event in select
like onchange="showid(this)"
then javascript
function showid(ids) {
console.log(ids[ids.selectedIndex].value); // get value
console.log(ids[ids.selectedIndex].id); // get id
}
if you want jquery solution then do something like below
$('#type_id').change(function(){
alert($(this).find('option:selected').attr('id'));
});

You can replace content in function parameter with this.id like below
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId('this.id') { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
Then you can use it
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}

not sure what you mean by 'get' but I'm guessing JavaScript
document.getElementById('type-id');
showId(document.getElementById('type-id'));

I see you use Bootstrap, so jQuery is not far away.
How about this:
function showId(id){
var v = $("#" + id).val();
alert(v);
}
or something like this:
$( "#"+id+" option:selected" ).text();
Second one gets the selected text, the other one the selected value of the selected option.