国家/城市/州验证

时间:2010-02-08 10:23:51

标签: php jquery validation geocode

我想使用PHP和jQuery做以下事情

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

步骤

  1. 从下拉列表中选择一个国家/地区。
  2. 城市下拉列表将自动填充所选国家/地区的城市列表。
  3. 如果该国家/地区可用,则状态列表将显示该国家/地区的所有州列表。
  4. 然后我需要验证所选城市,州和国家。

    你有什么想法吗?

    提前致谢

7 个答案:

答案 0 :(得分:13)

如果您想让外国人轻松输入地址,那么只提供一个文本字段,其中地址可以作为格式化文本输入。很少有国家/地区使用州(或类似的东西)作为地址的一部分,我不明白您为什么要提供城市的下拉列表。德国城市列表(或邮政地址中更正确,有效的地名)将包含大约23,000个条目。您认为更容易,输入地址或尝试在这样的列表中找到地名_

答案 1 :(得分:1)

我们所做的是使用ServiceObjects.com来验证地址。

因此,我们让用户在纯文本字段中输入他们的地址(或多或少),然后只需将地址详细信息发送到ServiceObjects.com并使用其Web服务返回的规范化/更正地址。

这不是直接回答你的问题,但也许它提供了根本问题的替代解决方案。

答案 2 :(得分:1)

  

从下拉列表中选择一个国家/地区。

我认为这是从数据库表填充的HTML SELECT

  

城市下拉列表将填满   自动与城市列表   所选国家/地区。

不要这样做。你想要的是一个jQuery Autocomplete,用户开始输入,然后你从数据库中提取可能的条目。

  

如果状态是   可用于该国家然后说明   列表将在所有州都可见   该国家的名单。

如果您正在进行邮寄地址验证,则只需少量国家/地区即可。处理它的一种常见方法是使用隐藏的SELECT框,当用户选择需要显示省份的国家(例如澳大利亚)时,请执行此操作。

  

然后我需要   验证所选城市,州和   国家。

请注意,州/省和国家/地区是SELECT控件,因此它们永远不会有无效结果,并且无法验证城市名称。

答案 3 :(得分:0)

我正面临着类似的挑战。我不知道你是否属于这种情况,但在我的情况下,我们需要确保输入的城市真的是现有城市。在项目的后期,我们希望能够收集世界任何地方同一城市的条目。这些结果需要准确。 所以我们也不能让人们进入费城和费城。我们还希望人们使用城市的英文名称而不是他们自己语言的名称。

我找到了一些国家,州和城市的公共数据库。例如:MaxMind。但它是大约3M城市的列表,我发现了另外一个超过600万的城市。我已经按照你描述的方式进行了设置。选择国家/地区,然后通过AJAX调用获取其中的城市并填写下拉列表。像荷兰这样的国家大约需要2秒钟,但中国或俄罗斯的装载量是不可接受的。 这些名单很大,而且根本不是用户友好的。

因此,我认为最好让人们在文本字段中输入它们,而这些城市真的都不匹配。 我们现在正在查看Google Maps API以解决我们的问题。

答案 4 :(得分:0)

这是一个非常标准的AJAX场景。实际上,您描述的确切问题可能是最常见的Ajax示例。你已经在你的问题上列出了PHP和jQuery作为标签;在演唱会中使用这些将使解决方案变得非常简单。

我的建议是用PHP查找jQuery Ajax示例。你几乎肯定会找到你正在寻找的东西。

答案 5 :(得分:-1)

打印状态列表下拉列表 通过方法创建状态的列表id get或post id, 制作一个sql城市列表表并使用php来调用表需要花费更多时间然后jquery但是它可以工作

答案 6 :(得分:-1)



  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="angular.js@1.4.x" 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>
&#13;
&#13;
&#13;