ajax dependent dropdown codeigniter - javascript

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 ?

Related

Jquery help for single select country state fetch data

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
}
?>

Dependent Drop Down select codeigniter Ajax

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');
}
});
}

Populate Dropdown based on another Dropdown Using Ajax, jQuery and Codeigniter on Update

I have created a dropdown that populates another dropdown.
I have created a modal for update in my application and I want the selected value of the dropdown to be the name taken from the database. It shows the name, but the problem is it doesnt show the other names which should be included.
(Note that the names show up depending on the first dropdown)
Here is my Model
function get_agents($campaign_id)
{
$campaign_id1 = mysqli_real_escape_string($this->db->conn_id,trim($campaign_id));
$query = $this->db->query("SELECT tbl_employee.emp_id, CONCAT(tbl_applicant.fname, ' ', tbl_applicant.lname) AS fullname FROM tbl_applicant INNER JOIN tbl_employee ON tbl_employee.apid=tbl_applicant.apid INNER JOIN tbl_account ON tbl_employee.acc_id=tbl_account.acc_id WHERE tbl_account.acc_id='".$campaign_id1."' ORDER BY tbl_applicant.fname ASC");
return $query->result();
}
Here is my Controller
public function getAgents()
{
$campaign_id = $this->input->post('campaign_id');
$data = $this->KudosModel->get_agents($campaign_id);
echo "<option value=''>-- Select Ambassador Name --</option>";
foreach($data as $a)
{
echo "<option value='".$a->emp_id."'>".$a->fullname."</option>";
}
}
Here is my View
<div class="form-group" style="height: auto; overflow: auto;">
<label class="col-sm-3 control-label float-left">Ambassador Name</label>
<div class="col-sm-9">
<select class="form-control" id="agentNames<?php echo $val->kudos_id; ?>" required="true" data-trigger="change" value="<?php echo $val->ambassador; ?>">
<option selected="" value="">-- Select Ambassador Name --</option>
<option selected="selected" value=""><?php echo $val->ambassador;?></option>
<?php
foreach($name2 as $row)
{
if($val->campaign==$row->acc_name)
echo '<'; if($val->ambassador==$row->fullname){
echo 'selected=selected';
}echo'option value="'.$row->emp_id.'">'.$row->fullname.'</option>';
}
?>
</select>
</div>
Here is my JQuery
$('#addCampaign<?php echo $val->kudos_id; ?>').on('change', function(){
$.ajax({
type : 'POST',
data : 'campaign_id='+ $('#addCampaign<?php echo $val->kudos_id; ?>').val(),
url : "<?php echo base_url(); ?>index.php/Kudos/getAgents/",
success : function(data){
//data returns your name, iterate through it and add the name to another select
$('#agentNames<?php echo $val->kudos_id; ?>').html(data);
}
});
});

Dependent Dropdown using Codeigniter

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?

Ajax Php dependent dropdown select - How to post name of city instead id into database (submit from data)?

Few days I try to solve problem but no luck.
Problem is next:
Web form with dependent dropdown select box where user can select his
city, zip and street and that work but.
When I submit form in my database no city_name (text) - only city_id (number/value).
So, question is - How to post city_name in database? User is from Rome and I Rome (text) is submited not city_id (number).
Select input:
<div class="form-group">
<label class="col-md-4 control-label" for="grad">City:*</label>
<div class="col-md-4">
<select type="text" name="city_name" id="city_name" class="form-control input-sm">
<option value=""></option>
<option value="999">---Enter city yourself---</option>
<?php $sql_query="SELECT * FROM city_table order by city_id asc";
$result=mysqli_query($dbconfig,$sql_query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<option value="<?php echo $row['city_id'].'_'.$row['city_name'];?>"><?php echo $row['city_name'];?></option>
<?php }?>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="post_no">ZIP code:*</label>
<div class="col-md-4">
<select name="zip_name" id="zip_name" class="form-control input-sm" onchange="recalculate_price();">
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="address">Street:*</label>
<div class="col-md-4">
<select name="street_name" id="street_name" class="form-control input-sm" onchange="recalculate_price();">
</select>
</div>
</div>
get_zip_php
<?php
include('db_config.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql_query="SELECT * FROM zip_table where city_id='$id' order by zip_name asc";
$result=mysqli_query($dbconfig,$sql_query);
?>
<option selected="selected">Select ZIP code :</option><?php
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
?>
<option value="<?php echo $row['zip_id']; ?>-<?php echo $row['limousine']; ?>-<?php echo $row['kombi']; ?>-<?php echo $row['mini_van']; ?>"><?php echo $row['zip_name']; ?></option>
<?php
}
}
?>
get_street_php
<?php
include('db_config.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql_query="SELECT * FROM street_table where zip_id='$id' order by street_name asc";
$result=mysqli_query($dbconfig,$sql_query);
?>
<option selected="selected">Select street please :</option><?php
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
?>
<option value="<?php echo $row['street_id']; ?>"><?php echo $row['street_name']; ?></option>
<?php
}
}
?>
Ajax:
<script>
$(document).ready(function()
{
$("#city_name").change(function()
{
var id=$(this).val();
var data = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_zip.php",
data: data,
cache: false,
success: function(html)
{
$("#zip_name").html(html);
recalculate_price();
}
});
});
$("#zip_name").change(function()
{
var id=$(this).val();
var data = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_street.php",
data: data,
cache: false,
success: function(html)
{
$("#street_name").html(html);
recalculate_price();
}
});
});
});
</script>
If I make some changes on "select city part" (Im beginner and really Im lost in all this) I can`t pass zip.
So, please tell me where to make all changes to pass all that things and post city_name, zip (name...I make it as "xxxx - city") and street name. Please help me, I googled and read here about problems few days and can`t continue work on my project until I fix this. Thanks in advance.
Use bellow select tag. It may useful for you
<select type="text" name="city_name" id="city_name" class="form-control input-sm">
<option value=""></option>
<option value="999">---Enter city yourself---</option>
<?php
$sql_query="SELECT * FROM city_table order by city_id asc";
$result=mysqli_query($dbconfig,$sql_query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo "<option value='".$row['city_id']."'>".$row['city_name']."</option>";
}
?>
</select>
Concatenate the id with value like this using delimiter like this
<option value="<?php echo $row['city_id'].'_'.$row['city_name'];?>"><?php echo $row['city_name'];?></option>
In php use explode()
The explode() function breaks a string into an array.
$ss = explode('_','6_Rome');
print_r($ss);
echo $ss[0]; //6 pass the value into query
In jquery use split()
Split a string into an array of substrings:
use split()
$vv = variable_name.split("_");
fetch city name from database on the basis of city id in your POST array before INSERT Query.
SELECT `city_name` FROM `city_table` WHERE `city_id`='".$_POST['city_name']."'
then use that city name in your insert query.

Categories

Resources