問い合わせフォームやユーザ登録フォームにて住所を入力させることがあるけれど、郵便番号を入力したら、住所が自動入力されるフォームを作ったのでメモです。
Djangoのフォームではモデルフォームを用いることがあるが、今回は個別アプリケーション内のforms.pyに記述する方法をとりました。
今回、住所自動入力のプラグインについてはajaxzip3を使用しました。
アプリケーション内にforms.pyを作成する
アプリケーションディレクトリのforms.pyを作成し、以下を記述する。
apps/forms.py
from django import forms
class TestForm(forms.Form):
zip21 = forms.RegexField(
regex=r'^[0-9]+$',
max_length=3,
)
zip22 = forms.RegexField(
regex=r'^[0-9]+$',
max_length=4,
widget=forms.TextInput(attrs={'onKeyUp' : "AjaxZip3.zip2addr('zip21','zip22','addr21','addr21')"}),
)
addr21 = forms.CharField()
初めて書いた時はzip22が気持ち悪い書き方だな、と思いましたが、これで動きました。
viewでformの読み込み&htmlへの受け渡し
とりあえず、viewではformをhtmlに受け渡すだけ。
apps/views.py
from django.shortcuts import render, get_object_or_404, redirect
from forms.forms import *
def form(request):
if request.method == 'POST':
// POSTリクエストを受けた後の処理を記述する
else:
form = ContactForm()
return render(request,
'test/form.html',
dict(form = form)
)
htmlにフォームを適用する
htmlでformを呼び出します。
templates/form.html
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<title>form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</head>
<body>
<form method="post">
{% csrf_token %}
{{ form.zip21 }}-{{ form.zip22 }}<br>
{{ form.addr21 }}<br>
<button type="submit">submit</button>
</form>
</body>
</html>
今回はgithub上のリモートファイルを見にいっていますが、こちらからダウンロードしてstaticフォルダに格納して読み込む方法でもOKです。
確認
上記の例で実装した場合、以下のようなフォームが作成されます。
(CSSも何も適用していないので見た目がアレですが)
上部分のインプットフィールドに郵便番号を入力すると、下部分のインプットフィールドに住所が自動で入力されるようになります
補足
郵便番号を一つのフィールドにする場合は
apps/forms.py
from django import forms
class TestForm(forms.Form):
zip11 = forms.RegexField(
regex=r'^[0-9]+$',
max_length=7,
widget=forms.TextInput(attrs={'onKeyUp' : "AjaxZip3.zip2addr(this,'','addr11','addr11')"}),
)
addr11 = forms.CharField()
templates/form.html
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<title>form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</head>
<body>
<form method="post">
{% csrf_token %}
{{ form.zip11 }}<br>
{{ form.addr11 }}<br>
<button type="submit">submit</button>
</form>
</body>
</html>
上記のような書き方をすれば良いようです。
他にも、都道府県だけを別のフィールドに分けたいなどもあると思いますが、そちらについてはajazip3のドキュメントや参考リンクを参照ください。
補足 その2
都道府県をプルダウンで表示する場合にも以下のようにして対応できました
apps/forms.py
from django import forms
class TestForm(forms.Form):
zip11 = forms.RegexField(
regex=r'^[0-9]+$',
max_length=7,
widget=forms.TextInput(attrs={'onKeyUp' : "AjaxZip3.zip2addr(this,'','addr11','addr11')"}),
)
addr11 = forms.CharField()
参考リンク
https://github.com/ajaxzip3/ajaxzip3.github.io
http://www.webdesign-fan.com/ajaxzip3