I may be asked to enter the address in the inquiry form or user registration form, but when I enter the zip code, I made a form in which the address is automatically entered, so it is a memo.
Model forms are sometimes used in Django forms, but this time I took the method of writing them in forms.py in the individual application.
This time, I used ajaxzip3 for the address auto-fill plugin.
Create forms.py in the application directory and write the following.
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()
When I wrote it for the first time, I thought that zip22 was a bad way to write, but it worked.
For the time being, in view, just pass the form to 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':
//Describe the processing after receiving the POST request
else:
form = ContactForm()
return render(request,
'test/form.html',
dict(form = form)
)
Call form in html.
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>
This time I'm looking at the remote file on github, but you can also download it from here, store it in a static folder, and read it.
If you want to combine the zip code into one field
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>
It seems that you should write as above. Other than that, you may want to divide only prefectures into different fields, but please refer to the ajazip3 documentation and reference links for that.
Even when displaying prefectures by pull-down, we were able to respond as follows
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()
Recommended Posts