郵便番号で住所を自動入力するフォームの作り方

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

htmlform

クライアントのサイトに、カタログ請求フォームを設置しました。郵便番号による住所の自動入力を入れて欲しいという要望があったので、対応しました。

スポンサーリンク

フォーム・プログラム

ken’swebさんが無料配布しているメールフォームプログラムを利用させて頂きました。著作権表記が必要ですが、目立たないので商用利用でも問題ないと思います。有料で表記の削除も可能です。

このフォームプログラムが秀逸なのは、フォームを作成してPOST先を本プログラムファイル(mail.php)に指定すると、自動的にデータを解析して送信確認画面を生成して、メール送信までしてくれるところです。フォームさえhtmlで作れれば、あとの処理はすべてプログラムで行ってくれます。

必須入力項目の設定なども行えます。本当に良くできているプログラムです。

郵便番号による住所自動入力

ajaxzip3を利用させてもらいました。誰でも無料で利用する事ができます。郵便番号データは、手動で更新されているそうです。本当にありがたいです。

例えば、1ボックスで郵便番号7桁を入力させる場合

<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<input type="text" name="pref01" size="20">
<input type="text" name="addr01" size="60">

のような郵便番号と都道府県、住所の入力ボックスを作ります。name名は日本語でもOKですので、

<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','住所');">
<input type="text" name="都道府県" size="20">
<input type="text" name="住所" size="60">

と書き換えても動きます。kenさんのフォームプログラムはnameを日本語にしたほうが使い勝手がよいです。書き換えてしまいましょう。

クライアントのページの文字コードがshift-jisで、自動入力が文字化けしてしまいました。shift-jisでも利用できると書いてあるのですが…。仕方がなくページの文字コードをutf-8に変更しました。

郵便番号による住所の自動入力は、郵便局の郵便番号データを更新しないといけないため、個々で対応すると非常に面倒です。今回利用させてもらったajaxzip3を管理している株式会社人気組さんに感謝します。

今日のわかった

ブログパーツを配布する際は、Ajax+jsonでコードを書いて、オープンソースにして、code.googleで公開すれば、良いかもです。サーバーの面倒を見る必要がなくなるので。

関連記事

関連記事

スポンサーリンク

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローしていただけると、ブログ更新を見逃しません

push7 feedly
スポンサーリンク

コメントをどうぞ

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