How Can I Select State According To Country In Cakephp Using Ajax?

Question

How Can I Select State According To Country In Cakephp Using Ajax?

I want to add state list according to the selected country. For eg if india

is selected then india States appears in states drop down etc.

Its not working.when i am going to select state according to country.

please help me.below is my coding

in controller

 <?php App::uses('AppController', 'Controller'); class VenuesController extends AppController { public $uses = array('State','Country','Venue','Facility','User','Image'); public $components = array('Custom'); ##################add state############################## public function state() { if($this->RequestHandler->isAjax()) { $this->layout = 'ajax'; $countryid=$this->request->data('country_id'); $selectstate = $this->State->find('list', array('fields' => array('state_name'), 'conditions' => array('State.country_id' => $countryid))); $this->set('selectbox',$selectstate); //pr($selectstate); } } } 

 in ctp file <script> $.noConflict(); </script> <link href="<?php echo HTTP_ROOT;?>css/jquery.validate.css" rel="stylesheet" type="text/css" /> <script src="<?php echo HTTP_ROOT;?>js/jquery.min.1.8.3.js" type="text/javascript"></script> <script src="<?php echo HTTP_ROOT;?>js/jquery.validate.js" type="text/javascript"></script> <script src="<?php echo HTTP_ROOT;?>js/jquery.validation.functions.js" type="text/javascript"></script> <link href="<?php echo HTTP_ROOT;?>css/admin/AdminLTE.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function showFields(id) { alert(id); //alert("hello"); dataString="country_id="+id; alert(dataString); $.ajax({ url: "venues/state", type: "POST", data: dataString,//alert(data); success: function(data) { $('#result').html(data); }, }); } </script> <section class="content-header"> <h1> Add Venue </h1> <ol class="breadcrumb"> <li><a href="http://localhost/locatevenue/users"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active">Add Venue</li> </ol> </ section> <!-- Main content --> <section class="content"> <div class="row"> <!-- left column --> <?php echo $this->Session->flash('success_message') ?> <div class="col-md-61"> <!-- general form elements --> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">Add Venue</h3> </div> <div style="width:49%; float:left;"> <?php echo $this->Form->create('Venue' ,array('id' =>'myform' ,'name' => 'myform','enctype'=>'multipart/form-data')); ?> <div class="box-body"> <div class="form-group"> <?php echo $this->Form->input('country', array('onChange'=>'showFields(this.value)','class'=>'form-control','id' =>'country','type' => 'select','label'=>true,'label'=>'country:','options' => $country ,'empty' => 'Select A Country','required'=>'false')); ?> </div> <div class="form-group"> <div id="result"> <?php echo $this->Form->input('state', array('class'=>'form-control','id' =>'state','type' => 'select','label'=>true,'label'=>'state:','options' => $state ,'empty' => 'Select A State','required'=>'false')); ?> </div> </div> <!--<div id="state"></div>--> </div> </div> <!-- /.box-body --> </div> </div> </div> </section> 

Answer 1

In your action the list only and sent id to the view and generate the options like -

View file for state action

<option value="">Select One</option>
<?php
foreach($selectbox as $key => $value) {
   echo "<option value='".$key."'>".$value."</option>";
}
?>

Generate the select field with an id -

echo $this->Form->input('state', array('class'=>'form-control','id' =>'state','type' => 'select','label'=>true,'label'=>'state:','options' => $state ,'empty' => 'Select A State','required'=>'false'));  ?>

Now on the Ajax success part -

   $.ajax({
        url: "venues/state",
        type: "POST",
        data: dataString,//alert(data);
        success: function(data)
         {     
            $('#state').html(data);
         },
    });

Hope it will do the trick.

Answer 2

Please echo your result in controller or model where your getting state list..then try to alert data in success function. format your code like select dropdown Means like this

<option value="<?php echo state_id;?>"><?php echo $state_name;?></option>

Make changes according to cake php.