Dropdown Ajax state and city is not working

Question

I have a registration form that includes state and city drop down. However it is not able to obtain the list of city after having selected a state.

In console the following appears to me like answer:

Failed to load resource: the server responded with a status of 404 (Not Found).

Tablas de region y comuna

    |----------------------------|
    |        tbl_state           |
    |----------------------------|
    |        id_state            |
    |        name_state          |  
    |----------------------------|

    |----------------------------|
    |        tbl_city            |
    |----------------------------|
    |        id_city             |
    |        name_city           |
    |        state_id            |
    |----------------------------|

Here is my code.

Controller:

public function index()
    {
        //State
        $data['result_state'] = $this->state_model->getState();

        $this->load->view('interprete_registro_view',$data);

    }

    public function city()
    {
        $id = $this->input->get('id_state');

        $this->state_model->getCity($id);
    }

Model:

public function getState() 
    {
        $this->db->select('*');
        $this->db->from('tbl_state');
        $query = $this->db->get();
        $query_result = $query->result();
        return $query_result;
    }

    public function getCity($id)
    {
        $query = $this->db->where('state_id', $id)->get('tbl_city');

        $cad = "";

        foreach ($query->result_array() as $row) {
            $cad .= "<option value='{$row['id_city']}'>{$row['name_city']}</option>";
        }

        echo $cad;
    }

View:

<script type="text/javascript">
  var path = '<?php echo base_url()?>index.php/';

   $(document).ready(function() {
     carga();

     $('#state').change(carga);

   });

   function carga () {
     var cd = $('#state').val();

     $.get(path + 'registre/city', {'id' : cd}, function(resp) {
       $('#city').empty().html(resp);
     });
   }

</script>
        <div class="col-2">
          <label for="state">State <span> * </span></label>
        </div>

        <div class="col-3">
          <select class="form-control" name="state" id="state">      
            <option value="" selected>- state -</option>
              <?php foreach($result_state as $row):?>
                <option value="<?php echo $row->id_state;?>"><?php echo $row->name_state;?></option>
              <?php endforeach; ?>
           </select>
        </div>

        <div class="col-2">
          <label for="city">City <span> * </span></label>
        </div>

        <div class="col-3">
          <select class="form-control" name="city" id="city">
            <option>- city -</option>"
          </select>
        </div>

Any idea, solution or dimension is welcome.

Answer 1

In View, JavaScript You are passing get parameter with name id , But in controller, you are trying to get id_state .

function carga () {
     var cd = $('#state').val();

     $.get(path + 'registre/city', {'id_state' : cd}, function(resp) {
       $('#city').empty().html(resp);
     });
   }