codeigniter - use dependent dropdown with jquery twice in a page - javascript

i have this functioning dependent drop-down, which is used for address, here is my code,
<select class="form-control" name = "PROV_ID" id = "PROV_ID">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID' id = 'CT_ID'>
<option value="">-- Select Type --</option>
</select>
jquery is
jQuery(document).ready(function(){
$("#PROV_ID").change(function() {
var PROVID = {"PROVID" : $('#PROV_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID,
url: "<?php base_url(); ?>Employees/dependent_dropdown",
success: function(data){
var select = $('#CT_ID');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>");
});
}
});
});
});
now what i need is to do another one like this in my form, because i need it for residential and permanent address, i did another one like this
<select class="form-control" name = "PROV_ID2" id = "PROV_ID2">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
<option value="">-- Select Type --</option>
</select>
and the jquery is
jQuery(document).ready(function(){
$("#PROV_ID2").change(function() {
var PROVID2 = {"PROVID2" : $('#PROV_ID2').val()};
console.log(PROVID2);
$.ajax({
type: "POST",
data: PROVID2,
url: "<?php base_url(); ?>Employees/dependent_dropdown",
success: function(data){
var select = $('#CT_ID2');
select.html('');
$.each(data, function(i2, option2){
select.append("<option value='"+option2.CT_ID+"'>"+option2.CITY+"</option>");
});
}
});
});
});
im not that sure with the jquery bec. i am not familiar with it, but i need this one finished asap. what is the error? why is the second dependent drop-down not working? thanks

try this for second dropdown, try for first to same thing
<select class="form-control" name = "PROV_ID2" id = "PROV_ID2" onchange="provchange()">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
<option value="">-- Select Type --</option>
</select>
jquery js
function provchange(){
var PROV_ID2=$('#PROV_ID2').val();
$.ajax({
url: "<?php echo base_url('Employees/dependent_dropdown/')?>",
type: "post",
data : {
PROV_ID: PROVID2
},
success: function(data){
var json = JSON.parse(data);
//alert(data);
$("#CT_ID2").empty();
$("#CT_ID2").append($('<option></option>').attr('value', '').text(':: SELECT ::'));
ival=0;
for (var i in json) {
$("#CT_ID2").append($('<option></option>').attr('value', json[i].CT_ID).text(json[i].CITY));
}
}
});
}

Related

calling subcategories when categories selected in codeigniter using ajax giving error

i have a simple form in codeigniter website where am trying to display sub categories when categories are selected, i did the following code:
$(document).ready(function() {
$('#country').change(function() {
var country_id = $('#country').val();
if (country_id != '') {
$.ajax({
url: "<?php echo base_url(); ?>index.php/homecontroller/fetchstate",
method: "POST",
data: {
country_id: country_id
},
success: function(data) {
$('#state').html(data);
$('#city').html('<option value="">Select Brand</option>');
}
});
} else {
$('#state').html('<option value="">Select Category</option>');
$('#city').html('<option value="">Select Brand</option>');
}
});
});
<form action="" method="post">
<label for="inputEmail4">Category</label>
<select id="country" class="form-control" name="cname" aria-label="Default select example">
<option>Select Category</option>
<?php
foreach($listcategory as $vals){
echo '<option value="'.$vals->name.'">'.$vals->name.'</option>';
}?>
</select>
<label for="inputEmail4">Brand</label>
<select class="form-control" name="sname" id="state">
<option value="">Select Brand</option>
</select>
i have the controller and model like below:
function fetchstate()
{
if($this->input->post('country_id'))
{
echo $this->excel_import_model->fetch_state($this->input->post('country_id'));
}
}
function fetch_state($country_id)
{
$this->db->where('inventorycategory', $country_id);
$this->db->order_by('name', 'ASC');
$query = $this->db->get('inventorybrand');
$output = '<option value="">Select Brand</option><option value="None">None</option>';
foreach($query->result() as $row)
{
$output .= '<option value="'.$row->name.'">'.$row->name.'</option>';
}
return $output;
}
now here the issue is when i select the category it doesnt display sub category, i get the following error:
POST http://localhost/letsship/index.php/homecontroller/fetchstate 500 (Internal Server Error)
can anyone please tell me what is wrong in here, thanks in advance

How to insert dynamic country state city dropdown in php? This code insert only their id

This is js
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loding1").hide();
$("#loding2").hide();
$(".state").change(function()
{
$("#loding1").show();
var id=$(this).val();
var dataString = 'id='+ id;
$(".district").find('option').remove();
$(".area").find('option').remove();
$.ajax
({
type: "POST",
url: "get_district.php",
data: dataString,
cache: false,
success: function(html)
{
$("#loding1").hide();
$(".district").html(html);
}
});
});
$(".district").change(function()
{
$("#loding2").show();
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_area.php",
data: dataString,
cache: false,
success: function(html)
{
$("#loding2").hide();
$(".area").html(html);
}
});
});
});
</script>
This is index.php
Here I can select state-district-area dynamically from DB. But when I am inserting this insert only their relative id. But I want to insert state_name,district_name,area_name. Is there any to help me.
<div class="form-control">
<form name="form2" action="" method="post" onSubmit="return valid2();">
<label for="email">State :</label>
<select name="state" class="state">
<option selected="selected">--Select State--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM state");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
<label>District :</label> <select name="district" class="district">
<option selected="selected">--Select District--</option>
</select>
<img src="ajax-loader.gif" id="loding1"></img>
<label>Area :</label> <select name="area" class="area">
<option selected="selected">--Select Area--</option>
</select>
<img src="ajax-loader.gif" id="loding2"></img>
</div>
</div>
<input type="submit" name="registration" class="btn btn-primary" value="Registration"/>
</form>
</div>
This is get_district.php
<?php
include('dbconfig.php');
if($_POST['id'])
{
$id=$_POST['id'];
$stmt = $DB_con->prepare("SELECT * FROM district_table WHERE state_id=:id");
$stmt->execute(array(':id' => $id));
?><option selected="selected">Select District :</option><?php
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['district_id']; ?>"><?php echo $row['district_name']; ?></option>
<?php
}
}
?>
This is get_area.php
<?php
include('dbconfig.php');
if($_POST['id'])
{
$id=$_POST['id'];
$stmt = $DB_con->prepare("SELECT * FROM area_table WHERE district_id=:id");
$stmt->execute(array(':id' => $id));
?><option selected="selected">Select Area :</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['are_id']; ?>"><?php echo $row['area_name']; ?></option>
<?php
}
}
?>
I want to insert state_name,district_name,area_name in DB. But the above code is inserting their id. Please Help me.

JavaScript not work properly inside PHP while

This function only works for the first selection,for example, if I choose id_rayon = 1 (is the first order of the data in the table), I can choose id_gardu based id_penyulang on id_rayon = 1, but if I choose another id_rayon id_gardu selection does not appear
<div class="w3-half">
<label>Penyulang</label>
<select class="w3-select w3-border" name="id_penyulang" onchange="pilih_penyulang(this.value);">
<option value="" disabled selected>Choose your option</option>
<?php
$id_rayon=$row['id_rayon'];
$vendor=$mysqli->query("SELECT * FROM `penyulang` where id_rayon=$id_rayon");
while($row_vendor=$vendor->fetch_array())
{
?>
<option value="<?php echo $row_vendor['id_penyulang'];?>"><?php echo $row_vendor['nama_penyulang'];?></option>
<?php
}
?>
</select>
/this only displays the first id and doesn't loop even though it is in the php while loop
<script type="text/javascript">
function pilih_penyulang(id_penyulang)
{
$.ajax(
{
url: 'http://localhost/arrester/option_gardu.php',
data : 'id_penyulang='+id_penyulang,
type: "post",
dataType: "html",
timeout: 10000,
success: function(response)
{
$('#dom_gardu').html(response);
}
});
}
</script>
</div>
<div class="w3-half">
<label>Gardu</label>
<select class="w3-select w3-border" name="id_gardu" id="dom_gardu">
<option value="" disabled selected>Choose your option</option>
</select>
</div>
and this is dom_gardu file that will be called by javascript
<?php
require_once('connect.php');
$id_penyulang = $_POST['id_penyulang'];
$query= $mysqli->query('select * from gardu where id_penyulang="'.$id_penyulang.'"');
while($data=$query->fetch_array()){
echo '<option value="'.$data['id_gardu'].'">'.$data['nama_gardu'].'</option>';
}
?>
my webpage view
my table view

Get Value from Combo Cox (view) and send to controller without loading page

How I can take value from view's code igniter to controller without loading page.. I have 2 class in controller, index and create_data.
I need to print $test dinamically
How can I make my code work?
View
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange()="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
Controller
function index(){
$data['combo'] = comboData();
$test = $this->input->post();
$data['test'] = $test;
echo $test;
if ($test==1) {
doSomething();
} else{
doNothing();
}
$this->template->display('example/index',$data);
}
|| view
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange="change_option()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="your_second_dropdown_id_name">
<option value="0">no data</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
||javascript/jquery
var category_id = $(this).val();
$.ajax({
type: "POST",
data: category_id,
url: "<?= base_url() ?>learning/dependent_dropdown",
success: function(data) {
$.each(data, function(i, data) {
var opt = $('<option />');
opt.val(data.id_type);
opt.text(data.name);
$('#your_second_dropdown_id_name').append(opt);
});
}
});

Two dropdown with one onchange

Hi what I'm trying to do is I have 2 dropdown. I want that the ajax will only work if the two dropdown has value selected. And how do I pass the datas of the two?
Here is my code right now
SCRIPT
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").val(data);
}
});
}
</script>
INDEX
<label>Group:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($results)) {
?>
<option value="<?php echo $row["g_id"]; ?>"><?php echo $row["g_name"]; ?> </option>
<?php
}
?>
</select>
<label>Division:</label><br/>
<select name="division" id="div-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Division</option>
<?php
while($row = mysql_fetch_array($results2)) {
?>
<option value="<?php echo $row["d_id"]; ?>"><?php echo $row["div_name"]; ?> </option>
<?php
}
?>
</select>
getstate.php
<?php
include("dbcon2.php");
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM personnel_gdd WHERE pg_group = '" . $_POST["country_id"] . "' ";
$results = mysql_query($query) or die(mysql_error());
?>
<?php
$row = mysql_num_rows($results)
?>
<?php echo $row; ?>
PS: I know that mysql is deprecated. I'll change it as soon as this problem is fixed. Thanks!
change
onchange="getState()"
donot pass any value in onchange event. And change your script like this
<script>
function getState(val) {
var country = $("#country-list").val();
var div = $("#div-list").val();
if(country && div) {
$.ajax({
type: "POST",
url: "get_state.php",
data:{"country_id": country,"div":div},
success: function(data){
$("#state-list").val(data);
}
});
}
}
</script>
This answer is generic, not related to your data but you will can understand how to figure it out.
$('select').change(function() {
var group = $('#country-list').val();
var div = $('#div-list').val();
if (group == -1 || div == -1) {
alert('please select country and division');
}
else {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id=' + country + '&=div_id' + div,
success: function(data){
$("#state-list").val(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Group:</label>
<select name="country" id="country-list" class="demoInputBox">
<option value="-1">Select Group</option>
<option value="1">Country 1</option>
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<br />
<label>Division:</label>
<select name="division" id="div-list" class="demoInputBox">
<option value="-1">Select Division</option>
<option value="1">Division 1</option>
<option value="2">Division 2</option>
<option value="3">Division 3</option>
</select>
Than you get the 2 values in the server and return the data to the client. Than put this data into the third dropdown.
HTML
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
$selq = "your query..............";
$selm = mysql_query($selq);
while($row = mysql_fetch_array($selm))
{
?>
<option value="<?php echo $row["country_id"]; ?>"><?php echo $row["name"]; ?> </option>
<?php
}
?>
</select>
<select name="state" id="state-list" >
</select>
Javascript function
function getState(val) {
$.ajax({
type: "POST",
url: "test2.php",
data:'country_id='+val,
success: function(data){
$("#state-list").append('<option value=""></option>');
$('#state-list').html(data);
}
});
}
Ajax PHP file
if(!empty($_POST["country_id"]))
{
$query ="your query............... ";
$results = mysql_query($query) or die(mysql_error());
while($fetch = mysql_fetch_array($results))
{
?>
<option value="<?php echo $fetch['id']?>" ><?php echo $fetch['name'] ?></option>
<?php
}
}
You only need to check if all values are different from -1 or "" or whatever - then build the data object and fire the Ajax:
JSnippet Demo
function runAjax() {
//Check both:
check = true;
$('select').each(function(){
console.log($(this).val())
if ($(this).val() == -1) {
$('span').text("Please select both.");
check = false
}
});
if (!check) return;
$('span').text("OK. submiting");
//Get the data:
var data = {
select1: $('#sel1').val(),
select2: $('#sel2').val()
};
//Go on with ajax....
}

Categories

Resources