先日、ビジネスパートナーから、「CRMメールのフォーム作成ツールで、郵便番号から住所が自動入力される仕組みを、複数設置する場合は、”オリジナルHTML”を自作し、Javascriptの記述を含めたHTMLソースをアップロードする必要があるらしい。JavascriptもHTMLも苦手だから、助けてちょんまげ」と連絡がありました。
今回は、住所の自動入力の箇所のみをサンプルとして用意しました。
Javascript 住所自動入力サンプルページのソースはこちら
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript 住所自動入力サンプルページ</title>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</head>
<body>
<form method="post">
<table>
<tr>
<td>郵便番号1</td>
</tr>
<tr>
<td>
<input type="text" name="郵便番号1" size="20" onkeyup="AjaxZip3.zip2addr(this,'','ご住所1','ご住所1');" placeholder="半角入力で住所自動入力"/>
</td>
</tr>
<tr>
<td>ご住所1</td>
</tr>
<tr>
<td>
※番地までご入力ください。<br /><input type="text" name="ご住所1" size="60" />
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>郵便番号2</td>
</tr>
<tr>
<td>
<input type="text" name="郵便番号2" size="20" onkeyup="AjaxZip3.zip2addr(this,'','ご住所2','ご住所2');" placeholder="半角入力で住所自動入力"/>
</td>
</tr>
<tr>
<td>ご住所2</td>
</tr>
<tr>
<td>
※番地までご入力ください。<br /><input type="text" name="ご住所2" size="60" />
</td>
</tr>
</table>
</form>
</body>
</html>このソースコードが、何かのお役に立てば幸いです。
追伸
今おすすめの一冊
2024年10月19日から全国で公開されているドキュメンタリー映画『五香宮の猫』の想田和弘監督の著書『なぜ僕はドキュメンタリーを撮るのか（講談社現代新書）』。
これを読めば、あなたの観察眼がこれまで以上に起動すること間違いなしです。
もしこの記事が役に立ったときは
埼玉県越谷市に向かって「ナイスだぜ、大橋プランニング。ホームページを新規で制作するとき、リニューアルするときが来たら、お前のことを必ず思い出すぜ」と囁いていただけると幸いです。
全国どこでも、メールやビデオ通話でのやり取りだけで、ご自身で手軽に自宅からでも更新することのできるホームページを制作します。
ちなみに、今のイチオシは「ワードプレスのホームページ制作」です。
お値引きさせていただきます。