郵便番号の自動入力機能を設置する方法

「jquery.jpostal.js」を使って、入力フォームを作成。

サンプルソース

【html部】

<form>

		郵便番号：
		〒<input type="text" id="postcode" name="postcode" maxlength="8"><br />

		都道府県：
		<select id="address1" name="prefecture">
			<option value="未選択" selected>（未選択）</option> 
			<option value="北海道">北海道</option>
			<option value="青森県">青森県</option>
			<option value="秋田県">秋田県</option>
			<option value="岩手県">岩手県</option>
			<option value="山形県">山形県</option>
			<option value="宮城県">宮城県</option>
			<option value="福島県">福島県</option>
			<option value="茨城県">茨城県</option>
			<option value="栃木県">栃木県</option>
			<option value="群馬県">群馬県</option>
			<option value="埼玉県">埼玉県</option>
			<option value="神奈川県">神奈川県</option>
			<option value="千葉県">千葉県</option>
			<option value="東京都">東京都</option>
			<option value="山梨県">山梨県</option>
			<option value="長野県">長野県</option>
			<option value="新潟県">新潟県</option>
			<option value="富山県">富山県</option>
			<option value="石川県">石川県</option>
			<option value="福井県">福井県</option>
			<option value="岐阜県">岐阜県</option>
			<option value="静岡県">静岡県</option>
			<option value="愛知県">愛知県</option>
			<option value="三重県">三重県</option>
			<option value="滋賀県">滋賀県</option>
			<option value="京都府">京都府</option>
			<option value="大阪府">大阪府</option>
			<option value="兵庫県">兵庫県</option>
			<option value="奈良県">奈良県</option>
			<option value="和歌山県">和歌山県</option>
			<option value="鳥取県">鳥取県</option>
			<option value="島根県">島根県</option>
			<option value="岡山県">岡山県</option>
			<option value="広島県">広島県</option>
			<option value="山口県">山口県</option>
			<option value="徳島県">徳島県</option>
			<option value="香川県">香川県</option>
			<option value="愛媛県">愛媛県</option>
			<option value="高知県">高知県</option>
			<option value="福岡県">福岡県</option>
			<option value="佐賀県">佐賀県</option>
			<option value="長崎県">長崎県</option>
			<option value="熊本県">熊本県</option>
			<option value="大分県">大分県</option>
			<option value="宮崎県">宮崎県</option>
			<option value="鹿児島県">鹿児島県</option>
			<option value="沖縄県">沖縄県</option>
		</select><br />

		市区町村：
		<input type="text" id="address2" name="city"><br />

		町名：
		<input type="text" id="address3" name="town"><br />

		番地など：
		<input type="text" id="address4" name="lastaddress"><br />

		<input type="reset" value="すべてを消す">
	</form>

【JavaScript部】

<!-- ============================= -->
	<!-- ▼スクリプトをCDNから読み込む -->
	<!-- ============================= -->
	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

	<!-- ================================================== -->
	<!-- ▼郵便番号や各種住所の入力欄に関するID名を指定する -->
	<!-- ================================================== -->
	<script type="text/javascript">
		$(window).ready( function() {
			$('#postcode').jpostal({
				postcode : [
					'#postcode'
				],
				address : {
					'#address1'  : '%3',
					'#address2'  : '%4',
					'#address3'  : '%5'
				}
			});
		});
	</script>

詳しくは、こちらで。

共有:

関連