Qbilinux 日記

Linux に関係することだけではなく,最近は一般的なコンピュータやガジェット関係についても記載してます.

cakephp のフォームで郵便番号から住所を自動入力

郵便番号から住所を自動入力する js としては,過去,ajaxzip2, ajaxzip3 とかありましたが,今は yubinbango.js に名前が変わって進化していますね.

ということで cakephp3 のフォームで郵便番号から住所を自動入力するために yubinbango,js を使ってみます.

適当な .ctp ファイルに下記を記入.

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<?= $this->Form->create(null, ['class' => "h-adr"]); ?>
<span class="p-country-name" style="display:none;">Japan</span>
<?= $this->Form->control('zip', ['type' => 'text', 'label' => '郵便番号', 'class' => "p-postal-code"]); ?>
<?= $this->Form->control('ken', ['type' => 'text', 'label' => '都道府県', 'class' => "p-region"]); ?>
<?= $this->Form->control('city', ['type' => 'text', 'label' => '市区町村', 'class' => "p-locality"]); ?>
<?= $this->Form->control('town', ['type' => 'text', 'label' => '町名', 'class' => "p-street-address p-extened-address"]); ?>
<?= $this->Form->control('address1', ['type' => 'text', 'label' => '番地']); ?>
<?= $this->Form->control('address2', ['type' => 'text', 'label' => '建物名']); ?>
<?= $this->Form->button('保存', ['type' => 'submit']); ?>
<?= $this->Form->end(); ?>

これでオッケーかな?

入力したい項目が上記と異なる場合には class 名を調整すればいいでしょう.詳細は https://github.com/yubinbango/yubinbango に説明があります.その他,必要なところは適宜修正してください.

県名をセレクト形式にしたい場合には上記の

<?= $this->Form->control('ken', ['type' => 'text', 'label' => '都道府県', 'class' => "p-region"]); ?>

の代わりに

<?php
$japan_ken = [
    '北海道地方' => ['北海道' => '北海道'],
    '東北地方' => [
    '青森県' => '青森県',
        ...
    ],
    ...
    '沖縄地方' => ['沖縄県' => '沖縄県']
];
?>
<?= $this->Form->select('ken', $japan_ken, ['label' => '都道府県', 'class' => "p-region"]); ?>

とかかな?配列は必要な形に書いてくださいね.

以上,参考まで.