In beginning of this tutorial we have to create database and using country, state and city tables we will display dropdown inputs. Each dropdown input get data using parent of input.
If you want state a country then first choose country from dropdown input and on selection jQuery or JavaScript event fetch child dropdown data using choosed country id. So first we create database using below database structure.
--
-- Table structure for table `city`
--
CREATE TABLE `city` (
`id` tinyint(4) NOT NULL auto_increment,
`city` varchar(50) default NULL,
`stateid` tinyint(4) default NULL,
`countryid` tinyint(4) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 ;
--
-- Dumping data for table `city`
--
INSERT INTO `city` VALUES (1, 'Los Angales', 2, 1);
INSERT INTO `city` VALUES (2, 'New York', 1, 1);
INSERT INTO `city` VALUES (3, 'Toranto', 4, 2);
INSERT INTO `city` VALUES (4, 'Vancovour', 3, 2);
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE `country` (
`id` tinyint(4) NOT NULL auto_increment,
`country` varchar(20) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 ;
--
-- Dumping data for table `country`
--
INSERT INTO `country` VALUES (1, 'USA');
INSERT INTO `country` VALUES (2, 'Canada');
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE `state` (
`id` tinyint(4) NOT NULL auto_increment,
`countryid` tinyint(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 ;
--
-- Dumping data for table `state`
--
INSERT INTO `state` VALUES (1, 1, 'New York');
INSERT INTO `state` VALUES (2, 1, 'Los Angeles');
INSERT INTO `state` VALUES (3, 2, 'British Columbia');
INSERT INTO `state` VALUES (4, 2, 'Toranto');
Two Different way for excute this process:
function getState(countryId) {
$.ajax({
type:"POST",
url:"findState.php",
data:'country='+countryId,
success: function(data){
$('#statediv').html(data);
}
});
}
This function work without any jQuery Library. It’s all depended on your web browser and window object model. We will learn more about window object model and browser object model in coming blogs.
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(countryId) {
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
I’d like to sign off with a big thank you. Thank you for reading and for helping me grow as a writer. But most of all thank you for being a part of my journey.
With love
In this tutorial, I have write code to add custom meta query in main query…
This website uses cookies.