Reputation: 846
I am working on a module where two drop downs will be available for the user to select, the values of second drop down will be auto-populated based on the first drop down and for fetching the values from db I am using AJAX.
Initially on page load there will be a text box in readonly mode in the place of second drop down (inside the span tag with id="model_inner_list"
), this is the case when first drop down value is 0.
When first dropdown's value changes to other than 0 the span tag id="model_inner_list"
text box will be replaced by second drop down (populated with values from db)
Now the problem is when I change back the first drop down value to 0 the second drop down in span tag with id="model_inner_list"
is not getting replaced with default text box. i.e. when ever the value of first drop down is 0 the second drop down should be replaced by default text box. Below are the code level details of what I am trying
Look of drop downs
HTML version on drop downs (included in View file)
<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Make</span>
<select name="bv_vech_name_id" id="bv_vech_name_id" required="" class="form-control user-success" onchange="javascript:get_model_list(this.value)">
<option value="0">Select Vehicle Make</option>
<option value="1">HERO</option>
<option value="2">TVS</option>
<option value="3">SUZUKI</option>
<option value="4">BAJAJ</option>
<option value="5">HONDA</option>
<option value="6">YAMAHA</option>
<option value="7">MAHINDRA</option>
<option value="8">ROYAL ENFIELD</option>
</select>
</div>
<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Model</span>
<span id="model_inner_list">
<input type="text" class="form-control" value="Please Select Make" readonly="">
</span>
</div>
I am using the below javascript function to call the php function using AJAX
function get_model_list(vm_vechile_id) {
document.getElementById('model_inner_list').innerHTML = '<img src="<?php echo base_url();?>assest/img/loader_small.gif"/>';
var url = '<?php echo base_url();?>index.php/order/get_model_list_ajax?vm_vechile_id=' + vm_vechile_id;
$.post(url, function(result) {
document.getElementById('model_inner_list').innerHTML = result;
});
}
Controller function called by AJAX
function get_model_list_ajax($vm_vechile_id = "", $ba_city = "") {
if ($vm_vechile_id == '0') {
echo '<input type="text" class="form-control" value="Please Select Make" readonly>';
} else {
$this->load->model('Order_model');
if (!isset($_REQUEST['vm_vechile_id']))
$_REQUEST['vm_vechile_id'] = $vm_vechile_id;
if (!isset($_REQUEST['ba_city']))
$_REQUEST['ba_city'] = "";
$result = $this->Order_model->get_option_list_state('vechile_model', 'vm_vechile_id', $_REQUEST['vm_vechile_id']);
$cat1[''] = 'Select Model';
if ($result) {
foreach ($result as $item) {
$cat1[$item->vm_id] = $item->vm_model_name;
}
}
if ($vm_vechile_id)
return form_dropdown('bv_vech_model_id', $cat1, $ba_city, 'id="bv_vech_model_id" class="form-control"');
else
echo form_dropdown('bv_vech_model_id', $cat1, $_REQUEST['ba_city'], 'id="bv_vech_model_id" class="form-control"');
}
}`
Model function called by above Controller
public function get_option_list_state($table_name = "", $field_name = "", $id = "") {
$res = array();
if ($id)
$this->db->where($field_name, $id);
$q = $this->db->get($table_name);
if ($q->num_rows() > 0) {
foreach (($q->result()) as $row) {
$data[] = $row;
}
return $data;
}
}
Upvotes: 1
Views: 514
Reputation: 11308
You can change the get_model_list
function like this:
function get_model_list(vm_vechile_id) {
if ( vm_vechile_id > 0 ) {
//ajax request goes here
}
else {
document.getElementById('model_inner_list').innerHTML = '<input type="text" class="form-control" value="Please Select Make" readonly="">';
}
}
Upvotes: 2