krishna89
krishna89

Reputation: 846

php codeigniter - get back the default value using ajax

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

enter image description here

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

Answers (1)

King Julien
King Julien

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

Related Questions