2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【python】Djangoで郵便番号の入力から住所を反映させる【Javascript】

Last updated at Posted at 2022-07-01

郵便番号の入力から住所を自動で反映させる

フォームから住所を書く際に郵便番号を入力するだけで自動で住所が入力されたら楽なのでその流れをDjangoのコードで書けるようにメモ。
※既にアプリは出来てるものとして、その部分は割愛します。

ルーティング設定(urls.py)

urls.py
from django.urls import path,include
from .import views
from django.views.generic import TemplateView

app_name = 'アプリ名'
urlpatterns = [
    path('', views.IndexView.as_view(),name="index"),
    path('inquiry/', views.InquiryView.as_view(),name="inquiry"),
]

後にInquiry classを作る予定でこのpath設定。

ビューの編集(views.py)

views.py
from .forms import InquiryForm #forms.pyをインポート
from django.urls import reverse_lazy #処理が終わった後に画面に飛ばす処理

class InquiryView(generic.FormView):
    template_name = "inquiry.html"
    form_class = InquiryForm
    success_url = reverse_lazy('アプリ名:inquiry')

フォームの設定(forms.py)

forms.py
import os
from django import forms
from django.db.models import fields
#(省略)

Zipcode = {
    'zip_code':
        forms.TextInput(
            attrs={'class': 'p-postal-code','placeholder': '記入例:1060022'}, 
            ),
}

class InquiryForm(forms.Form):#クラス名は必要に応じて変える
# 郵便番号からcityまでを自動入力
    zipcode = forms.RegexField(label='郵便番号(ハイフンなし)',
        regex=r'^[0-9]+$',
        max_length=7,
        widget=forms.TextInput(attrs={'onKeyUp' : "AjaxZip3.zip2addr(this,'','state','city')"}),
    )
    state = forms.CharField(label='都道府県',max_length=6)
    city = forms.CharField(label='市区町村',max_length=10)
    address_1 = forms.CharField(label='番地',max_length=10)
    address_2 = forms.CharField(label='建物名・部屋番号',max_length=10)


    def __init__(self,*args,**kwargs):#入力フォーム表示用
        self.fields['zipcode'].widget.attrs['class']='form-control col-11'
        self.fields['zipcode'].widget.attrs['placeholder']='例:1600022 '

        self.fields['state'].widget.attrs['class']='form-control col-11'
        self.fields['state'].widget.attrs['placeholder']='都道府県をここに入力してください'

        self.fields['city'].widget.attrs['class']='form-control col-11'
        self.fields['city'].widget.attrs['placeholder']='市区町村をここに入力してください'

        self.fields['address_1'].widget.attrs['class']='form-control col-11'
        self.fields['address_1'].widget.attrs['placeholder']='番地をここに入力してください'

        self.fields['address_2'].widget.attrs['class']='form-control col-11'
        self.fields['address_2'].widget.attrs['placeholder']='建物名・部屋番号をここに入力してください'

いい感じに動いてもらうためのJavaScript

今回はAjaxzip3を使ってるので、そこから引用してます。

※今回はbase.htmlにべた書きしましたが、他におすすめがあれば教えてください。

base.html
    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?