送信フォームの入力形式を郵便番号に制限する
jQuery lookup プラグイン の lookupable メソッドを使って、送信フォームの入力形式を郵便番号に制限します。また、郵便番号を入力したというイベントを受け取ることもできます。
ボタンを使って郵便番号から住所を検索する
lookupable メソッドを使って、郵便番号の入力形式を制限します。検索ボタンをクリックすると、lookupTo メソッドを使って、入力した郵便番号から住所を検索し、その住所を送信フォームに表示します。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#c1').lookupable();
$('#lookup').click(function() {
$('#c1').lookupTo('#a1');
});
});
//]]>
</script>
<form method="get" action="./example.cgi">
<table>
<tr>
<td width="80">郵便番号</td>
<td>
<input id="c1" type="text" name="code" size="10" />
<input id="lookup" type="button" value="検索" />
</td>
</tr><tr>
<td>住所</td>
<td><input id="a1" type="text" name="address" size="60" /></td>
</tr><tr>
<td colspan="2"><input type="submit" value="送信" /></td>
</tr>
</table>
</form>
イベントを使って郵便番号から住所を検索する
lookupable メソッドを使って、郵便番号の入力形式を制限します。lookupable メソッドからのイベントを受け取り、その中で lookupTo メソッドを使って、入力した郵便番号から住所を検索し、その住所を送信フォームに表示します。
次のソースコードの中では使っていませんが、lookupable メソッドのイベントの引数からも郵便番号を取得できます。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#c2').lookupable(function(c) {
$(this).lookupTo('#a2');
});
});
//]]>
</script>
<form method="get" action="./example.cgi">
<table>
<tr>
<td width="80">郵便番号</td>
<td>
<input id="c2" type="text" name="code" size="10" />
</td>
</tr><tr>
<td>住所</td>
<td><input id="a2" type="text" name="address" size="60" /></td>
</tr><tr>
<td colspan="2"><input type="submit" value="送信" /></td>
</tr>
</table>
</form>
関連情報
- ベーシック
- 送信フォーム
- with jQuery
- Google Maps API
- BLOGRANGER API