*

[備忘録]3分でできる!Webフォームで郵便番号から住所を自動入力する方法

公開日: : 備忘録

work-731198-s

わずらわしいインストールや組み込みは一切不要!

Webサイトのお問い合わせフォームや注文フォームなどで、「郵便番号」から「住所」を自動入力するチョー簡単な方法を!

※参考サイト:超簡単!たった2行だけで郵便番号から住所自動表示する方法:ajaxzip3

※ここでは「AjaxZip3」を使います。
公式サイト
https://yubinbango.github.io/

<特徴>
● わずらわしいインストールや組み込みは一切不要
● ソースに3行追加するだけ
● 郵便番号情報データを更新する必要なし
● 郵便番号欄や都道府県・住所欄などを分けるパタンにも対応(4パターン)

組合せはいくつかあるが、今回は最もシンプルな方法を

郵便番号と住所項目の入力方法にはいくつか組合せがある(下記)。

auto0538
※ただし今回はそのうち最も簡単な1パタンのみ紹介(残りのパタンは上記「参考サイト」を参照してください)

(1) 「郵便番号7桁」→「都道府県&市区町村」

■手順1:<head>内にscript宣言を追加

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

 
 

■手順2:フォームの郵便番号フィールドに「onKeyUp」を追加

<!– 郵便番号7桁 –>
<input type=”text” name=”postalcode1″ size=”10″ maxlength=”8″
onKeyUp=”AjaxZip3.zip2addr(this,”,’address1′,’address1′);”>
<!– 都道府県&市区町村 –>
<input type=”text” name=”address1″ size=”60″>

※nameの「postalcode1」「address1」は任意に変更可能(日本語(全角文字)でもOKだった)
 
 

 
 
 
 
 ← 応援していただける方
   クリックをお願いします!

社長ブログ ブログランキングへ    

運営会社

関連記事

201807120837-1

[備忘録]LINEの通知がウザいとき、通知をオフにしましょう!

ライングループでの連続投稿にウンザリ。。 LINEで、特にLINEグループで大勢参加しているような

記事を読む

auto0873

[備忘録]お名前.com:お名前IDの付け替え

お名前.com間でのドメイン移管は「お名前IDの付け替え」で簡単! 弊社では、自社およびクライ

記事を読む

auto1120

[備忘録]WindowsでHEIC形式ファイルを表示する方法

HEIC形式は iOS11から採用された新しいメディア圧縮方式 ある方が撮影された画像を送ってこら

記事を読む

auto0965

[備忘録]Zenlogicでのmlsqldumpコマンド(MySQL 5.6)

コマンドラインからのmlsqldumpにハマった。。 最近、Zenlogicサーバーを使う機会が増

記事を読む

binary-2372131-s

[備忘録]TransmitMailで件名が16文字で切れてしまう件

メールフォームツール「TransmitMail」で特定環境で発生する不具合 Webサイトの構築

記事を読む

auto0408-s

[備忘録]タスクマネージャーのショートカット

ショートカットで一発起動 Windowsを使用中にPCが重くなったりしたときにタスクマネージャを起

記事を読む

auto0042-s

[備忘録]Gmail:サーバーにメールを残さない設定

サーバー容量制限、またはセキュリティのためにも残さないように! Gmailをメールソフトで使ってい

記事を読む

auto0042

[備忘録]Acrobat Reader DC:ツールメニューを消す方法

開くたびにウザいツールパネルウィンドウ Acrobat Readerの結構新しいバージョンを使って

記事を読む

windows-829947_640-s

[備忘録]PC起動時に特定プログラムを実行させる方法 3選

シャットダウン時/スタートアップ時にツールを起動したいとき シャットダウン時の方法はブログ「シ

記事を読む

auto0048

[備忘録]Windows8:チャームを表示させない方法

マウス操作するたびにチャームが表示されウザイ。。 愛用のノートPC(LetsNOTE)のOSは W

記事を読む

運営会社

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

運営会社

c2167439a-s
[備忘録]URLエンコード・デコード

文字化けした文字列を読みたい! 例えば、こんな(↓)風に文字化け

DSC04738-s
HDDからSSDに交換したら、メッチャ快適になった話!

なんでもっと早くやらなかったのか、、後悔。。 オフィスで業務に使

DSC04336-s-s
日本一早い紅葉は、冬の足音でした。

大雪山系 旭岳へアタック 先週、盛和塾の例会で札幌を訪れた翌日、

auto1653
オンライン メモ帳アプリ「Google Keep」が超便利!

パソコンでメモって、スマホで見る 日頃パソコンを使っていて、ちょっと

auto0259
[備忘録]WordPressの自動更新を抑止する方法

バージョンアップで思わぬ不具合が出る可能性も。。 WordPre

→もっと見る

PAGE TOP ↑