CODEWITHSUNDEEP
phpjqueryvalidationgeocode
M.M.H.Masud
M.M.H.Masud

Reputation: 329

Country/City/state validation

I want to do the following things using PHP and jQuery

https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow

Steps

  1. Select a country from a dropdown list.
  2. The city dropdown list will fillup automatically with the list of cities of the selected country.
  3. If state is available for that country then state list will be visible with all state list of that country.

Then I need to validate the selected city, state and country.

Do you have any ideas?

Thanks in advance

Upvotes: 3

Views: 15402

Answers (8)

Unknown_uID
Unknown_uID

Reputation: 1

Not quit what your asking, however this auto-fills the fields with users data with is saved in their browser.

Use HTML autocomplete: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

<form method="post">
 <input type="text" name="userCountry" id="country-name" autocomplete="on" />
 <input type="submit" />
</form>

Then use PHP to validate the information;

<?PHP
 /* SANITIZE END-USER INPUTs */
 if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {
   $_POST = filter_var_array( $_POST, FILTER_SANITIZE_STRING );
 }

 /* VALIDATE DATA */
 if ( isset( $_POST['userCountry'] ) {
  $countrys = array( "united states of america", "united kingdom", "australia" );
  if ( !in_array( strtolower( $_POST['userCountry'] ), $countrys ) ) {
   /* Return a failed response */
   return false;
  }
 }

 /* SAVE DATA */

 /* Return a successful response */
 return true;
?>

or

you may have to look into onChange then populate data. EG.

$("#country-name").change(function () {
    $("#state, #city").find("option:gt(0)").remove();
    $("#state").find("option:first").text("Loading...");
    $.getJSON("/get/states", {
        country_id: $(this).val()
    }, function (json) {
        $("#state").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state"));
        }
    });
});
$("#state").change(function () {
    $("#city").find("option:gt(0)").remove();
    $("#city").find("option:first").text("Loading...");
    $.getJSON("/get/cities", {
        state_id: $(this).val()
    }, function (json) {
        $("#city").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city"));
        }
    });
});

Upvotes: 0

Charlie
Charlie

Reputation: 26

  var app = angular.module('ganesh', []);

	app.controller('MainCtrl', function($scope) {
  $scope.name = "Charlie's Programming..........";
  $scope.countries = {

                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
               'India': {
						 'AndamanandNicobarIslands' : {	},
						 'AndhraPradesh' : { },
						 'ArunachalPradesh' : { },
						 'Assam' : { },
						 'Bihar' : { },
						 'Chandigarh' : { },
						 'Chhattisgarh' : { }, 
						 'DadraandNagarHaveli' : { },
						 'DamanandDiu' : { }, 
						 'Delhi' : { },
						 'Goa' : { },
						 'Gujarat' : { }, 
						 'Haryana' : { },
						 'HimachalPradesh' : { },
						 'JammuandKashmir' : { }, 
						 'Jharkhand' : { }, 
						 'Karnataka' : { },
						 'Kerala' : { },
						 'Lakshadweep' : { }, 
						 'MadhyaPradesh' : { }, 
						 'Maharashtra' : { 
										 'Ahmednagar' : [   ],
										 'Akola|Alibag' : [   ],
										 'Amaravati' : [   ],
										 'Arnala' : [   ], 
										 'Aurangabad' : [   ],
										 'Aurangabad' : [   ],
										 'Bandra' : [   ], 
										 'Bassain' : [   ], 
										 'Belapur' : [   ],
										 'Bhiwandi' : [   ], 
										 'Bhusaval' : [   ], 
										 'Borliai-Mandla' : [   ],
										 'Chandrapur' : [   ], 
										 'Dahanu' : [   ],
										 'Daulatabad' : [   ], 
										 'Dighi(Pune)' : [   ],
										 'Dombivali' : [   ],
										 'Goa' : [   ],
										 'Jaitapur' : [   ],
										 'Jalgaon' : [   ],
										 'JawaharlalNehru(NhavaSheva)' : [   ], 
										 'Kalyan' : [   ],
										 'Karanja' : [   ],
										 'Kelwa' : [   ], 
										 'Khopoli' : [   ],
										 'Kolhapur' : [   ], 
										 'Lonavale' : [   ], 
										 'Malegaon' : [   ], 
										 'Malwan' : [   ], 
										 'Manori' : [   ],
										 'MiraBhayandar' : [   ],
										 'Miraj' : [   ],
										 'Mumbai(exBombay)' : [   ],
										 'Murad' : [   ],
										 'Nagapur' : [   ],
										 'Nagpur' : [   ], 
										 'Nalasopara' : [   ],
										 'Nanded' : [   ],
										 'Nandgaon' : [   ],
										 'Nashik' : ['422606', '422004', '422002', '422003'], 
										 'NaviMumbai' : [   ],
										 'Nhave' : [   ], 
										 'Osmanabad' : [   ],
										 'Palghar' : [   ], 
										 'Panvel' : [   ], 
										 'Pimpri' : [   ], 
										 'Pune' : [   ], 
										 'Ratnagiri' : [   ], 
										 'Sholapur' : [   ],
										 'Shrirampur' : [   ],
										 'Shriwardhan' : [   ],
										 'Tarapur' : [   ],
										 'Thana' : [   ], 
										 'Thane' : [   ], 
										 'Trombay' : [   ],
										 'Varsova' : [   ], 
										 'Vengurla' : [   ],
										 'Virar' : [   ], 
										 'Wada' : [   ], 
										 'Panvel' : [   ],
										 'Pimpri' : [   ], 
										 'Pune' : [   ], 
										 'Ratnagiri' : [   ],
										 'Sholapur' : [   ],
										 'Shrirampur' : [   ],
										 'Shriwardhan' : [   ], 
										 'Tarapur' : [   ], 
										 'Thana' : [   ], 
										 'Thane' : [   ], 
										 'Trombay' : [   ], 
										 'Varsova' : [   ],
										 'Vengurla' : [   ], 
										 'Virar' : [   ], 
										 'Wada' : [   ], 
											},
						 'Manipur' : { },
						 'Meghalaya' : { },
						 'Mizoram' : { }, 
						 'Nagaland' : { }, 
						 'Orissa' : { },
						 'Pondicherry' : { },
						 'Punjab' : { }, 
						 'Rajasthan' : { }, 
						 'Sikkim' : { }, 
						 'TamilNadu' : { }, 
						 'Telangana' : { },
						 'Tripura' : { },
						 'Uttaranchal' : { },
						 'UttarPradesh' : { }, 
						 'WestBengal' : { }
						 
                  
                },
                'Australia': {
                    'New South Wales': ['Sydney'],
                    'Victoria': ['Melbourne']
                }
            };

			$scope.GetSelectedCountry = function () {
                $scope.strCountry = document.getElementById("country").value;
            };
            $scope.GetSelectedState = function () {
                $scope.strState = document.getElementById("state").value;
            };
            $scope.GetSelectedcity = function () {
                $scope.strCity = document.getElementById("city").value;
            };
             $scope.GetSelectedpin = function () {
                $scope.strPin = document.getElementById("pin").value;
            };
});
  <!DOCTYPE html>
<html ng-app="ganesh">

  <head>
    <meta charset="utf-8" />
    <title>Charlie</title>
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>	
 </head>

  <body >	
  <div ng-controller="MainCtrl">
  <p>Welcome to {{name}}</p>
    <label for="country">Country *</label>
 <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
 <option value=''>Select</option>
</select>    
 <label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  <label for="city">City *</label>
 <select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for (city, pin)  in model.state"
         ><option value=''>Select</option>
 </select>
 <label for="pin">Pincode *</label>
 <select id="pin" ng-disabled="!model.city" ng-model="model.pin" ng-options="pin for pin  in model.city"
         ><option value=''>Select</option>
 </select>
 </div>
  </body>

</html>

Upvotes: -1

harshit pathak
harshit pathak

Reputation: 1

print a drop down with state list make the list id of state get or post id by methods, make a sql city list table and use php to make call the table it take more time then jquery but it work

Upvotes: -1

egrunin
egrunin

Reputation: 25083

Select a country from a dropdown list.

I assume this is an HTML SELECT populated from a database table.

The city dropdown list will fillup automatically with the list of cities of the selected country.

Don't do this. What you want is a jQuery Autocomplete, where the user starts to type and then you pull possible entries from your database.

If state is available for that country then state list will be visible with all state list of that country.

If you are doing mailing address validation, you only need this for a small number of countries. One common way of handling it is to have hidden SELECT boxes, and when the user picks a country (say, Australia) where you need to show the provinces, do it.

Then I need to validate the selected city, state and country.

Note that State/Province and Country are SELECT controls, so they should never have an invalid result, and validating city names is not possible.

Upvotes: 0

Alex Czarto
Alex Czarto

Reputation: 3247

What we do is use ServiceObjects.com to validate the address.

So we let the user enter their address in a plain text field (more or less), and then simply send the address details to ServiceObjects.com and use the normalized/corrected address returned by their webservice.

This isn't directly answering your question, but perhaps it provides an alternative solution to the root problem.

Upvotes: 1

Brian Lacy
Brian Lacy

Reputation: 19118

This is a very standard AJAX scenario. In fact, the exact problem you describe is probably the single most common introductory Ajax example. You've listed PHP and jQuery as tags on your question; using these in concert will make the solution very simple.

My suggestion is to lookup jQuery Ajax examples with PHP. You'll almost certainly find exactly what you're looking for.

Upvotes: 0

onomio
onomio

Reputation: 381

I'm facing a similar challenge. I don't know whether it's the case with you but in my case we need to be sure that the cities that are entered are really the existing ones. Later on in the project we want to be able to collect entries that are in the same city, anywhere in the world. And those results need to be precise. So we can't have people entering Philadelphia and Philly as well. And we also want people to use the English names for cities and not the names in their own language.

I've found some public databases of countries, states and cities. For instance here: MaxMind. But it's a list of roughly 3M cities and I've found another one of more than 6M. I've set it up exactly the way you describe. Select the country, then get the cities in it via an AJAX call and fill the dropdown. It takes about 2 seconds for a country like the Netherlands but the loading is just not acceptable for China or Russia for instance. And the lists are huge and not that user friendly at all.

So I suppose it's better to let people just enter them in a textfield when it's not that important that the cities really all match. We're looking at the Google Maps API right now to solve our problem.

Upvotes: 0

jarnbjo
jarnbjo

Reputation: 34323

If you want to make it easy for foreigners to enter an address, then please simply offer a text field, where the address can be entered as formatted text. Very few countries are using a state (or something similar) as part of the address and I don't understand why you want to offer a drop-down list with cities. A list of German cities (or more correct, valid place names in a postal address) would contain some 23,000 entries. What do you think is more easy, enter the address or try to find the place name in such a list_

Upvotes: 13

Related Questions