This is my model:
public function get_site_lang()
{
$query = $this->db->query("SELECT id_lang,name from LANGUAGE");
return $query->result_array();
}
public function get_compo_list($language)
{
$query = $this->db->query("SELECT m.id_menu,name from lang_menu l JOIN MENU m ON l.menu_id=m.id_menu
WHERE m.parent_id is NULL and l.lang_id=$language");
return $query->result_array();
}
public function get_compo_cat_list($id,$language)
{
$query = $this->db->query("SELECT m.id_menu,name from lang_menu l JOIN MENU m ON l.menu_id=m.id_menu
WHERE m.parent_id=$id and l.lang_id=$language");
return $query->result_array();
}
This is my view:
<div class="form-group">
<label>Select Language</label>
<select class="form-control" name="language" required>
<?php
foreach ($lang as $l) {
$selected = ($l['id_lang'] == $this->input->post('lang_id')) ? ' selected="selected"' : null;
echo '<option value="'.$l['id_lang'].'" '.$selected.'>'.$l['name'].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<label>Select Parent</label>
<select name="id_menu" class="form-control" id="id_menu">
<?php
foreach ($compo as $co)
{
echo "<option value=".$co['id_menu'].">".$co['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Select Child</label>
<select class="form-control" name="type">
<option value="">Select A Child</option>
</select>
</div>
How can I show in the "Select A Child" options that I should have after public function get_compo_cat_list($id,$language) run? I'm missing the point after trying with (Ajax) and (JavaScript) and it is not working. What I am missing here?
Related
here is a code for multiselect which is working fine for multiselect but i need this code to be work in single select , in this Code #Country list is simply getting list from option as you can see in code and when we select #country in dropdown the #state data is fetching from data base according to country selection
( Multi select is Working fine but i need this in Single select )
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<label for="country">Country</label> ( Simple Drop Down for Country )
<?php include "fetch_country.php"; ?>
<select id="country" name="country[]" multiple class="form-control" >
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
<option value="China" label="China">China</option>
</select>
<div class="col-sm-6">
<label for="state">State</label> ( Fetching State data from Database )
<select id="state" name="state[]" multiple class="form-control" >
<option disabled>Select Country First</option>
</select>
<button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
</form>
<script>
$(document).ready(function(){
$('#country').multiselect({
nonSelectedText:'?',
buttonWidth:'250px',
maxHeight: 400,
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
$('#state').multiselect('rebuild');
}
})
}
}
});
$('#state').multiselect({
nonSelectedText: '?',
allSelectedText: 'All',
buttonWidth:'250px',
includeSelectAllOption: true,
maxHeight: 400,
enableFiltering:true
});
});
</script>
Html Part
<div class="container mt-5">
<div class="row">
<div class="card">
<div class="card-header">
<h2 class="text-success">Country State City Dropdown List in PHP MySQL Ajax - Tutsmake.COM</h2>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
<option value="">Select Country</option>
<?php
require_once "db.php";
$result = mysqli_query($conn, "SELECT * FROM countries");
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city-dropdown">
</select>
</div>
</form>
</div>
</div>
</div>
</div>
js part
$(document).ready(function () {
$('#country-dropdown').on('change', function () {
var country_id = this.value;
$.ajax({
url: "states-by-country.php",
type: "POST",
data: {
country_id: country_id
},
cache: false,
success: function (result) {
$("#state-dropdown").html(result);
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
$('#state-dropdown').on('change', function () {
var state_id = this.value;
$.ajax({
url: "cities-by-state.php",
type: "POST",
data: {
state_id: state_id
},
cache: false,
success: function (result) {
$("#city-dropdown").html(result);
}
});
});
});
states-by-country.php
<?php
require_once "db.php";
$country_id = $_POST["country_id"];
$result = mysqli_query($conn, "SELECT * FROM states where country_id = $country_id");
?>
<option value="">Select State</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
cities-by-state.php
<?php
require_once "db.php";
$state_id = $_POST["state_id"];
$result = mysqli_query($conn, "SELECT * FROM cities where state_id = $state_id");
?>
<option value="">Select City</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
Then try this
<label for="country">Country</label>
<select id="country" name="country" multiple class="form-control">
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
<option value="China" label="China">China</option>
</select>
<label for="state">State</label> ( Fetching State data from Database )
<select id="state" name="state[]" multiple class="form-control">
<option disabled>Select Country First</option>
</select>
<button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
<script>
$(document).ready(function() {
$('#country').on('change', function() {
var countryname = this.value;
$.ajax({
url: "states-by-country.php",
type: "POST",
data: {
country: countryname
},
cache: false,
success: function(result) {
$("#state-dropdown").html(result);
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
});
</script>
states-by-country.php
<?php
require_once "db.php";
$country = $_POST["country"];
$result = mysqli_query($conn, "SELECT * FROM states where countryname = $country");
?>
<option value="">Select State</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
I would want a select box that can insert data if the data typed doesn't exist in the DB, could anyone help me, please?
<div class="form-group">
<label for="">Catégorie</label>
<select class="form-control select2" name="category" required>
<?php
$select = $pdo->prepare("SELECT * FROM tbl_category");
$select->execute();
while($row = $select->fetch(PDO::FETCH_ASSOC)){
extract($row)
?>
<option><?php echo $row['cat_name']; ?></option>
<?php
}
?>
</select>
</div>
Use select2 plugging. It's facilitated to search and add new value which is not in dropdowns.
Click here Select2
<div class="form-group">
<label for="">Catégorie</label>
<select class="form-control select2" name="category" required id="category">
<?php
$select = $pdo->prepare("SELECT * FROM tbl_category");
$select->execute();
while($row = $select->fetch(PDO::FETCH_ASSOC)){
extract($row)
?>
<option><?php echo $row['cat_name']; ?></option>
<?php
}
?>
</select>
</div>
$("#category").select2({
tags: true
});
So there are two drop-down lists in my code. One is "Specialization" which has options such as General, Cardiologist, Pediatrician, etc, and the other one is "Doctor" which has the name of the doctors as options. What I want is to show the names of the doctors in the "Doctor" drop-down based on the values selected in the "Specialization" drop-down.
This is how my JSON looks like:
[{"username":"Ashok","spec":"General"},{"username":"arun","spec":"Cardiologist"},{"username":"Dinesh","spec":"General"},{"username":"Ganesh","spec":"Pediatrician"},{"username":"Kumar","spec":"Pediatrician"},{"username":"Amit","spec":"Cardiologist"},{"username":"Abbis","spec":"Neurologist"}]
Eg: If I select 'General' from the "Specialization" drop-down, then only the doctors with General (Ashok and Dinesh) will be shown as the drop-down options in the "doctor" drop-down.
Here is the HTML and JS part:
<div class="col-md-4">
<label for="spec">Specialization:</label>
</div>
<div class="col-md-8">
<select name="spec" class="form-control" id="spec">
<option value="" disabled selected>Select Specialization</option>
<?php display_specs();?>
</select>
<script>
let data = <?php echo json_encode($docarray); ?>
document.getElementById('spec').onchange = function updateSpecs(e) {
let values = data.filter(obj => obj.spec == this.value).map(o => o.username);
document.getElementById('doctor1').value = document.querySelector(`[value=${//query that matches the doctor name in json}]`).getAttribute('data-value');
};
</script>
</div><br><br>
<div class="col-md-4"><label for="doctor">Doctors:</label></div>
<div class="col-md-8">
<select name="doctor" class="form-control" id="doctor1" required="required">
<option value="" disabled selected>Select Doctor</option>
<?php display_docs();?>
</select>
<script>
document.getElementById('doctor').onchange = function updateFees(e) {
document.getElementById('docFees').value = document.querySelector(`[value=${this.value}]`).getAttribute('data-value'); // fees will be added based on the doctor mentioned in the db
};
Here is the PHP code for 'display_specs()' and 'display docs()':
function display_docs()
{
global $con;
$query="select * from doctb";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result))
{
$username=$row['username'];
$price=$row['docFees'];
echo '<option value="' .$username. '" data-value="'.$price.'">'.$username.'</option>';
}
}
function display_specs() {
global $con;
$query="select distinct(spec) from doctb";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result))
{
$spec=$row['spec'];
$username=$row['username'];
echo '<option value="' .$username. '" data-value="'.$spec.'">'.$spec.'</option>';
}
}
Screenshot:
I did my best my couldn't able to do that. So any suggestions are welcome. Thanks in advance!
You can use additional attribute in docs list
data-spec="'.$spec.'"
function display_docs()
{
global $con;
$query = "select * from doctb";
$result = mysqli_query($con,$query);
while( $row = mysqli_fetch_array($result) )
{
$username = $row['username'];
$price = $row['docFees'];
$spec = $row['spec'];
echo '<option value="' .$username. '" data-value="'.$price.'" data-spec="'.$spec.'">'.$username.'</option>';
}
}
function display_specs() {
global $con;
$query = "select distinct(spec) from doctb";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
$spec = $row['spec'];
$username = $row['username'];
echo '<option value = "' .$username. '" data-value = "'.$spec.'">'.$spec.'</option>';
}
}
then use JS to filter second select
document.getElementById('spec').onchange = function foo() {
let spec = this.value;
let docs = [...document.getElementById('doctor').options];
docs.forEach((el, ind, arr)=>{
arr[ind].setAttribute("style","");
if (el.getAttribute("data-spec") != spec ) {
arr[ind].setAttribute("style","display: none");
}
});
};
<div class="col-md-4">
<label for="spec">Specialization:</label>
</div>
<div class="col-md-8">
<select name="spec" class="form-control" id="spec">
<option value="" disabled selected>Select Specialization</option>
<option value="General">General</option>
<option value="Cardiologist">Cardiologist</option>
<option value="Pediatrician">Pediatrician</option>
<option value="Neurologist">Neurologist</option>
</select>
</div><br>
<div class="col-md-4"><label for="doctor">Doctors:</label></div>
<div class="col-md-8">
<select name="doctor" class="form-control" id="doctor" required="required">
<option value="" disabled selected>Select Doctor</option>
<option value="Ashok" data-spec="General">Ashok</option>
<option value="arun" data-spec="Cardiologist">arun</option>
<option value="Dinesh" data-spec="General">Dinesh</option>
<option value="Ganesh" data-spec="Pediatrician">Ganesh</option>
<option value="Kumar" data-spec="Pediatrician">Kumar</option>
<option value="Amit" data-spec="Cardiologist">Amit</option>
<option value="Abbis" data-spec="Neurologist">Abbis</option>
</select>
</div>
I want to taking id from index using ajax that supply to controller and controller will output category id using json and supply to index file.
Controller
public function index() {
$this->load->model('sales/Sales_model');
$this->load->model('product/Product_model');
$user_info['p_info'] = $this->Product_model->fetch_data();
$this->load->view('sales/index',$user_info);
}
function get_pcatagory(){
$this->load->model('sales/Sales_model');
$pid = $this->input->post('pro_id');
$cat_info = $this->Sales_model->fetch_data_pid($pid);
if(count($cat_info) > 0){
$select_box = '';
$select_box .= 'Select Catagory ID';
foreach ($cat_info as $value) {
// $value->id data will go to option of the select menu
}
echo json_encode($select_box);
}
}
Model
`function fetch_data_pid($pid){
$query = $this->db->get_where('product',array('id'=>$pid));
return $query->result();
}`
Ajax
`
$(document).ready(function(){
$('#pid').on('change',function(){
var pro_id_data = $('#pid').val();
alert(pro_id_data);
$.ajax({
url:'sales/get_pcatagory',
type:'POST',
data:{'pro_id' : pro_id_data},
dataType: 'json',
success:
function(result){
$('#cate').html(result);
},
error:
function(){
alert('error')
}
});
});
});
`
view
<div class="form-group">
<label>Product ID</label>
<select name="p_id" id="pid" class="form-control" placeholder="Enter Product" required>
<option value="0">Select Product ID</option>
<?php
foreach ($p_info as $value) {
?>
<option value="<?php echo $value->id ;?>"><?php echo $value->p_name ;?></option>
<?php }?>
</select>
</div>
<div id="" class="form-group">
<label>Category</label>
<select name="catagory" id="cate" class="form-control" placeholder="Enter Product" required >
</select>
</div>
But it alerts error . How can I solve it ?
Im trying to get houses to be filled on the second dropdown from their respective estates selected in the first drop down. Im getting no results in the second dropdown.
This is the HTML:
<div class="col-sm-4 col-xs-12">
<div class="form-group drop-custum">
<select id="estate" name="estate" data-live-search="true" class="form-control show-tick"
onchange="get_houses(this.value)">
<option value="">-- Estate --</option>
<?php
$sql = $this->db->query("select * from estates ORDER BY estate_name asc");
$result = $sql->result();
foreach ($result as $estates):
?>
<option class="text-uppercase"
value="<?= $estates->estate_name?>"> <?= $estates->estate_name?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group drop-custum">
<select name="house" data-live-search="true" id="house"
class="form-control show-tick">
<option value="">-- House --</option>
</select>
</div>
</div>
This is the AJAX:
function get_houses()
{
$.ajax({
url:"fill_houses/",
type:"POST",
data:'estate_name='+val,
success:function(data)
{
$("#house").html(data);
alert('success');
}
});
}
This is the PHP:
public function fill_houses()
{
$query = "select * from houses where estate_name='" . $_POST["estate_name"] . "' order by house_number asc ";
$result = $query->result();
foreach ($result as $estates):
'<option class="text-uppercase" value="'.$estates->house_id.'"> '.$estates->house_number.'</option>';
endforeach;
}
You must return the value back in php function fill_houses().
public function fill_houses()
{
$query = $this->db->query("select * from houses where estate_name='" . $_POST["estate_name"] . "' order by house_number asc ");
$result = $query->result();
foreach ($result as $estates):
return '<option class="text-uppercase" value="'.$estates->house_id.'"> '.$estates->house_number.'</option>';
endforeach;
}
also in javascript ajax function get_houses() you need to get the variable. and a couple of edit.
function get_houses(val)
{
$.ajax({
url:"fill_houses/",
type:"POST",
data: { 'estate_name': val} ,
success:function(data)
{
$("#house").html(data);
alert('success');
}
});
}