In country use onchange function
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'));
then call to the function showFields
script src="jquery.min.1.8.3.js"
<type="text/javascript"></script>
type="text/javascript"></script>
function showFields(id)
{
var strURL = '<?php echo HTTP_ROOT; ??>';
var image = "<?php echo HTTP_ROOT . 'img/ajax-loader-small.gif'; ??>"
$('#loader').html("<img src=""+image+"" />");
$.post(strURL+"venues/ajaxstate",{"country":id},function(data){
if(data) {
$('#result').html(data);
$("#loader").hide();
}
else
{
alert("Error...");
}
});
}
make a page ajaxstate.ctp .placed it in view of that controller
if($selectbox)
{
echo $this->Form->input('Venue.state', array('class'=>'form-control','id' =>'state','type' => 'select','label'=>true,'label'=>'state:','options' => $selectbox ,'empty' => 'Select A State','required'=>'false'));
}
in controller
App::uses('AppController', 'Controller');
class VenuesController extends AppController {
public $uses = array('State','Country','Venue','Facility','User','Image');
public $components = array('RequestHandler', 'Custom');
public function ajaxstate()
{
if($this->RequestHandler->isAjax()) {
$this->layout = 'ajax';
$countryid=$this->request->data('country');
$selectstate = $this->State->find('list', array('fields' => array('state_name'), 'conditions' => array('State.country_id' => $countryid)));
$this->set('selectbox',$selectstate);
}
}
in ctp file in place of state
<div class="form-group">
<div class="loader" id="loader"></div>
<div id="result">
</div>
</div>