Wednesday, March 29, 2023
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern
Techsoft Tutorials
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases
No Result
View All Result
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases
No Result
View All Result
Techsoft Tutorials
No Result
View All Result
Home CAKEPHP

Dynamic dropdown in cakephp 2.0 (Selectbox)

Bhavin Shiroya by Bhavin Shiroya
August 3, 2019
in CAKEPHP, PHP
4
Dynamic-Dropdown-with-Cakephp
2.9k
VIEWS
Share on FacebookShare on Twitter

Hello Friend, In this post i want to show you how to create dynamic dropdown in cakephp 2.x using ajax auto populating Select boxes, country state city selectbox in cakephp, cake selection box, Dependent dropdown in cakephp.

  • In this tutorials i want to demonstrate, How to create dynamic dropdown in cakephp. In cakephp this task become easy to develop dynamic dropdown country state city.
  • Cakephp is one of the most popular frameworks in the market to develope web application, cakephp development team provide wonderful functionality to make it possible.
  • Click here for what is cakephp.
  • Here I show to how to call ajax and load data dynamically without page load. Country state city is the best example for explaining this concept.
  • Here i use Cakephp version 2.5.6 for explaining this demo,  Also include download file to download whole demo free free free.

Database & Tables

First of all open mysql and create one database dropdowns this database contains three tables countries states and cities as below. state table has relation with country table and city table has relation with state table.

   Country State City tabel

// countries tabel

DROP TABLE IF EXISTS `countries`;
CREATE TABLE `countries` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(25) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


// states table
DROP TABLE IF EXISTS `states`;
CREATE TABLE `states` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `countries_id` int(3) NOT NULL,
  `state_name` varchar(35) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


// cities table 
DROP TABLE IF EXISTS `cities`;
CREATE TABLE `cities` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `state_id` int(3) NOT NULL,
  `city_name` varchar(35) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
  • Cakephp follow MVC(Model View Controller) pattern That’s why it’s contain three file Model, Controller, view.

More Information about cakephp click here.

  1. Controller File (app\Controller\CountriesController.php)
<?php
class CountriesController extends AppController {
	public $helpers = array('Html', 'Form', 'Session');
	public $components = array('RequestHandler');
	
	public function getStates() {
		$states = array();
		if (isset($this->request['data']['id'])) {
			$states = $this->Country->State->find('list', array(
				'fields' => array(
					'id',
					'state_name',
				),
				'conditions' => array(
					'State.countries_id' => $this->request['data']['id']
				)
			));
		}
		header('Content-Type: application/json');
		echo json_encode($states);
		exit();
	}
	//www.techsofttutorials.com
	// free latest programming technology tutorials and demo.
	public function index() {
		$Country = $this->Country->find('list', array(
			'fields' => array(
				'id',
				'country_name',
			),
		));
		$this->set('Country', $Country);
	}

	public function getCities() {
		$cities = array();
		if (isset($this->request['data']['id'])) {
			$cities = $this->Country->State->City->find('list', array(
				'fields' => array(
					'id',
					'city_name',
				),
				'conditions' => array(
					'City.state_id' => $this->request['data']['id']
				)
			));
		}
		header('Content-Type: application/json');
		echo json_encode($cities);
		exit();
	}
}
  • After the controller file, you must have to create three model file for your table as give bellow.

2) Country Model File(app\Model\Country.php)

<?php
class Country extends Model {

	public $hasMany = array(
			'State'
	);
}
//www.techsofttutorials.com  free latest technology tutorials

3) State Model File (app\Model\State.php)

<?php
class State extends Model {
	public $belongsTo = array(
			'Country'
	);
	public $hasMany = array(
			'City'
	);
}

//www.techsofttutorials.com Free latest technology tutorials

4) Cities Model file (app\Model\City.php)

<?php
class City extends Model {

	public $belongsTo = array(
			'State'
	);
	
}
  • After Model file you must be create view file for front view. View Folder should be contain all the view file with appropriate controller name.

5) View File (app\View\Countries\index.ctp)

<?php
	echo $this->Html->script('jquery.min');
	echo $this->Form->input('country', array(
		'id' =>'country',
		'options' => $Country,
		'empty' => 'select country',
	));
	echo $this->Html->image('ajax-loader.gif', array('alt' => 'lodding', 'id' => 'loding1'));
	echo $this->Form->input('state', array(
		'id' =>'state',
		//'type' => 'select'
		'options' => '$states',
		'empty' => 'select state',
	));
	echo $this->Html->image('ajax-loader.gif', array('alt' => 'lodding', 'id' => 'loding2'));
	echo $this->Form->input('city', array(
		'id' =>'city',
		//'type' => 'select'
		'empty' => 'select city',
		'options' => '$city',
	));
?>
<script type="text/javascript">
	$(document).ready(function() {
		$("#loding1").hide();
		$("#loding2").hide();
		$("#country").on('change',function() {
			var id = $(this).val();
			$("#loding1").show();
			$("#state").find('option').remove();
			$("#city").find('option').remove();
			if (id) {
				var dataString = 'id='+ id;
				$.ajax({
					type: "POST",
					url: '<?php echo Router::url(array("controller" => "countries", "action" => "getStates")); ?>' ,
					data: dataString,
					cache: false,
					success: function(html) {
						$("#loding1").hide();
						$.each(html, function(key, value) {              
							$('<option>').val('').text('select');
							$('<option>').val(key).text(value).appendTo($("#state"));
						});
					} 
				});
			}
		});

		$("#state").on('change',function() {
			var id = $(this).val();
			$("#loding2").show();
			$("#city").find('option').remove();
			if (id) {
				var dataString = 'id='+ id;
				$.ajax({
					type: "POST",
					url: '<?php echo Router::url(array("controller" => "countries", "action" => "getCities")); ?>',
					data: dataString,
					cache: false,
					success: function(html) {
						$("#loding2").hide();
						$.each(html, function(key, value) {              
							$('<option>').val(key).text(value).appendTo($("#city"));
						});
					} 
				});
			}	
		});
	});
</script>
  • You Must have to include jquery file in defult.ctp. I also give a Download link to download the whole demo.
Tags: ajax with cakephpCakephp 2.0cakephp ajaxcakephp dropdown onchangecakephp dropdown selectcakephp select boxcountry state citycountry state city drop down list in cakephpdrop down in cakephp
Bhavin Shiroya

Bhavin Shiroya

Web Developer by Professional, Blogger by hobby, Youtuber by passion

Related Posts

Mobile-detect-in-php
PHP

How to detect mobile and tablet device using php code

August 14, 2019
How-to-Send-Sms-using-PHP
PHP

Sending sms using php and mvaayoo API

July 7, 2019
Dropdown-php-and-sql-copy
PHP

Ajax country state city dropdown using php & mysql

July 7, 2019
new_cakephp
CAKEPHP

What is cakephp?? for cakephp developers

July 7, 2019
php-login
PHP

php login form, with mysql using jquery 2015.

January 18, 2020

Categories

  • CAKEPHP
  • Databases
  • FREE RESPONSIVE TEMPLATES
  • HTML 5 & CSS3
  • IONIC FRAMEWORK
  • JAVA
  • JQUERY
  • MISCELLANEOUS
  • PHP
  • WEB DESIGNING
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern

© 2019 All Rights Reserved By Techsoft Tutorials

No Result
View All Result
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases

© 2019 All Rights Reserved By Techsoft Tutorials