米国では、都市は一意の5桁の郵便番号(郵便番号)で分割されています。次に、この郵便番号は、その市と州を示しています。したがって、都市と州を入力することは冗長です。
Address Field モジュールを使用して、郵便番号が送信された場合に都市と州を自動入力する方法はありますか?
次に、これは2番目の質問、正しい郵便番号の入力を強制する方法につながります。デフォルトでは、ユーザーは任意のテキストを入力でき、それが受け入れられます。
次に、zipcodeapi.com APIを使用するJavaScriptコードを示します。
<script type="text/javascript">//<![CDATA[
$(function() {
// IMPORTANT: Fill in your client key
var clientKey = "js-9qZHzu2Flc59Eq5rx10JdKERovBlJp3TQ3ApyC4TOa3tA8U7aVRnFwf41RpLgtE7";
var cache = {};
var container = $("#example1");
var errorDiv = container.find("div.text-error");
/** Handle successful response */
function handleResp(data)
{
// Check for error
if (data.error_msg)
errorDiv.text(data.error_msg);
else if ("city" in data)
{
// Set city and state
container.find("input[name='city']").val(data.city);
container.find("input[name='state']").val(data.state);
}
}
// Set up event handlers
container.find("input[name='zipcode']").on("keyup change", function() {
// Get Zip code
var zipcode = $(this).val().substring(0, 5);
if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
{
// Clear error
errorDiv.empty();
// Check cache
if (zipcode in cache)
{
handleResp(cache[zipcode]);
}
else
{
// Build url
var url = "http://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians";
// Make AJAX request
$.ajax({
"url": url,
"dataType": "json"
}).done(function(data) {
handleResp(data);
// Store in cache
cache[zipcode] = data;
}).fail(function(data) {
if (data.responseText && (json = $.parseJSON(data.responseText)))
{
// Store in cache
cache[zipcode] = json;
// Check for error
if (json.error_msg)
errorDiv.text(json.error_msg);
}
else
errorDiv.text('Request failed.');
});
}
}
}).trigger("change");
});
//]]>
ここに例があります- http://www.zipcodeapi.com/Examples#example1
問題は、最初に郵便番号を入力するユーザーに基づいて有効な都市と州を自動入力する方法なので、上記のJavaScriptコードはそれを行います。上記の例をクリックして、動作を確認してください。
このために、アドレスフィールドへの依存関係を使用して独自のカスタムモジュールを開発できます。
支援コード
$("#txtZipCode").bind("change keyup input", function (e) {
var field = $(this);
if (field.val().length === 5) {
showLocation(field.val());
}
else
showLocation("");
});
function showLocation(zipCodeValue) {
var txtCity = $("#city");
var txtState = $("#state");
if (zipCodeValue.toString().length != 5) {
txtCity.val("");
txtState.val("");
}
else {
$.ajax({
dataType: "json",
url: "Location/GetZipCode",
data:
{
zipCodeNumber: zipCodeValue
},
success: function (data) {
txtCity.val(data.City);
txtState.val(data.State);
}
});
}
}
エンティティ参照の自動入力の場合は、この機能を実現するのに役立ちます。これについてはプロジェクトのページにコメントがあります。
Addressfield:Addressfieldをロードするには、追加の処理が必要です。動作させるためのサブモジュールが含まれています。 「エンティティ参照の自動入力アドレスフィールド」を有効にしてください。
私はこれをテストしませんでした、検索中に見つかりました。
これがお役に立てば幸いです。
Lushのこの新しいモジュールをチェックアウトして、その過程でレビューを与えることができます。
住所フィールド検索: https://www.drupal.org/sandbox/danielmrichards/2580615