在Codeigniter中使用Ajax

I saw few pages but tried all and none worked for me.

This is what i want:

on my html:

<form class="form-horizontal" role="form" method="POST" action="">
                  <select name="customer_id" id="customer_id" class="form-control">
                    <option>Select customer</option>
                    <?php foreach($customers AS $customer): ?>
                      <option value="<?php echo $customer->id;?>"><?php echo $customer->name; ?></option>
                    <?php endforeach; ?>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label for="category" class="col-xs-4 control-label">Category</label>
                <div class="col-sm-4 col-xs-8">
                  <input type="text" class="form-control" name="category" id="category" placeholder="Category" disabled="disabled">
                </div>
              </div>

Then i have a script to auto fill the category field depending on the customer selected, ass on the database each customers fall into different categories.

<script type="text/javascript">
$(document).ready(function() {

$('#customer_id').change(function() {

var customer_id = $("#customer_id").val();

$.ajax({
type: "POST",
url: <?php echo base_url(). 'customer/getCustomerCat' ; ?>,
data: form_data,
success: function(cat) 
    {
$("#category").val(cat);
}
});
});  

});
</script>

Then on my controller i have:

public function getCustomerCat(){
$id = $this->input->post('customer_id');
$category = $this->customer_model->getCustomerCat($id)[0]->category;

echo $category;

}

On my Model i have:

public function getCustomerCat($id){
    $query ="SELECT category FROM customers WHERE id=$id";
    $query = $this->db->query($query);
    return $query->result();
}

I am not so good with ajax but expected the categoory field to be populated after selecting a customer without reloading the page.