Codeigniter - Posting form variables and retrieving through jQuery AJAX

Question

I need to post a variable and get result in Codeigniter using Ajax jQuery.

Although my db has content, the code is still returning me empty array. - array(0) {}. The problem is that the variable is not getting posted from the form. Here is my code:

FORM CODE - View :

<form id = "myform1" onsubmit="return false">
 <select name="field_country">
 <option value="0">Argentina</option>
 <option value="1">Chile</option>
 </select>
</form>

Javascript - inline in view :

jQuery(document).ready(function($){
 $("select[name='field_country']").change(function(){
  var country_name= $("select[name='field_country'] option:selected").text();
  $.post("<?= base_url(); ?>index.php/catalog/getCities/", {country:country_name}, function(data){
   alert(data);
  })
 })
})

catalog.php controller - function :

function getCities(){
 $country_name = $this->input->post('country', 'Argentina');
 $result = $this->catalog_model->getCitiesNames($country_name);
 var_dump($result);
}

catalog_model Model function :

function getCitiesNames($country_name) {
 $cities=array();
 $result = $this->db->query("SELECT title FROM cities WHERE country = '".$country_name."'");
 foreach ($result->result() as $row) {
  array_push($cities, $row->title);
 }
 return $cities;
}

Carlos · Accepted Answer · 2011-01-27 09:02:07Z

2

You need to make a small modification to your Javascript and Controller code. In order for Javascript and PHP to communicate between each other, you have to tell both pieces of code what format you are using to transfer the information. The most easy and common format is JSON. Therefore you need to modify your code to send and receive JSON.

FORM VIEW

<form id="myform1" onsubmit="return false">
    <select id='country' name="field_country">
       <option value="0">Argentina</option>
       <option value="1">Chile</option>
    </select>
</form>

I have added an id='country' to your select for easier reach.

JAVASCRIPT

$(document).ready(function(){
   // When the SELECT is changed
   $("#myform1 #country").change(function(){

    var country_name= $(this).find("option:selected").text();
    $.post ( "<?= base_url(); ?>index.php/catalog/getCities/",
             { country:country_name },
             function(data){
                ...on success do something here
             },
             'json'
    );

});

});

You need to tell Javascript that you are expecting a JSON object back.

CONTROLLER

function getCities(){
   $country_name = $this->input->post('country');
   $result = $this->catalog_model->getCitiesNames($country_name);

   echo json_encode($result);
}

Your PHP code, should then return a JSON object.

answered Jan 27, 2011 at 9:02

Carlos

2,23212 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cruising2hell Over a year ago

Thanks a lot. I solved the problem, the issue isnt with returning variables. The problem was that the variables used to get destroyed while being posted. I found the solution by changing the post uri to just "getCities" instead of absolute path as earlier. I am using multi-language uri identifier so I doubt it may be interfering as the app looked like generating 2 data requests (1 POST, and 1 GET) automatically).Its solved now though, thanks.

enthusiastic · Accepted Answer · 2011-01-27 08:36:00Z

0

jQuery(document).ready(function($){
$("select[name='field_country']").change(function(){
    var country_name= $("select[name='field_country'] option:selected").text();
    $.ajax({
  type: "POST",
   url: "<?= base_url(); ?>index.php/catalog/getCities/",
   data: "country="+country_name,   
   success: function(data){
            alert(data);
       }
    });
   });
});

edited Jan 27, 2011 at 8:36

answered Jan 27, 2011 at 8:23

enthusiastic

7222 gold badges9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Codeigniter - Posting form variables and retrieving through jQuery AJAX

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related