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