[PYTHON] [Django] Erstellen Sie ein Formular, das automatisch die Adresse aus der Postleitzahl ausfüllt

Möglicherweise werde ich aufgefordert, die Adresse in das Anfrageformular oder das Benutzerregistrierungsformular einzugeben. Bei der Eingabe der Postleitzahl habe ich jedoch ein Formular erstellt, in das die Adresse automatisch eingegeben wird, sodass es sich um ein Memo handelt. Modellformulare werden manchmal in Django-Formularen verwendet, aber dieses Mal habe ich die Methode gewählt, sie in forms.py in einer einzelnen Anwendung zu schreiben. Dieses Mal habe ich ajaxzip3 für das Plug-In zum automatischen Ausfüllen der Adresse verwendet.

Erstellen Sie forms.py in Ihrer Anwendung

Erstellen Sie forms.py des Anwendungsverzeichnisses und schreiben Sie Folgendes.

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()

Als ich es zum ersten Mal schrieb, dachte ich, dass zip22 eine schlechte Art zu schreiben ist, aber es hat funktioniert.

Laden Sie das Formular mit Ansicht und übergeben Sie es an HTML

Übergeben Sie das Formular vorerst nur an 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':
        //Beschreiben Sie die Verarbeitung nach Erhalt der POST-Anforderung
    else:
        form = ContactForm()
        return render(request,
            'test/form.html',
            dict(form = form)
        )

Formular auf HTML anwenden

Rufen Sie das Formular in HTML auf.

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>

Dieses Mal schaue ich mir die Remote-Datei auf github an, aber Sie können sie auch von hier herunterladen, in einem statischen Ordner speichern und lesen.


## Bestätigung Bei der Implementierung im obigen Beispiel wird das folgende Formular erstellt. (Es sieht so aus, als hätte ich kein CSS angewendet.) ![スクリーンショット 2017-02-15 20.36.10.png](https://qiita-image-store.s3.amazonaws.com/0/80787/93d2b035-d525-9de3-3685-5b6db936adbf.png "スクリーンショット2017-02-1520.36.10.png ") Wenn Sie im oberen Eingabefeld eine Postleitzahl eingeben, wird die Adresse automatisch im unteren Eingabefeld eingegeben.

Ergänzung

Wenn Sie möchten, dass die Postleitzahl ein Feld ist

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>

Es scheint, dass Sie wie oben schreiben sollten. Abgesehen davon möchten Sie möglicherweise nur die Präfekturen in verschiedene Bereiche unterteilen. Weitere Informationen hierzu finden Sie in der Ajazip3-Dokumentation und in den Referenzlinks.

Ergänzung 2

Selbst wenn Präfekturen per Pulldown angezeigt wurden, konnten wir wie folgt reagieren

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()

## Referenzlink https://github.com/ajaxzip3/ajaxzip3.github.io http://www.webdesign-fan.com/ajaxzip3

Recommended Posts

[Django] Erstellen Sie ein Formular, das automatisch die Adresse aus der Postleitzahl ausfüllt
Holen Sie sich eine Adresse aus einer Postleitzahl
Erstellen wir eine Kundendatenbank, in der QR-Code automatisch in Python ausgegeben wird
Erstellen Sie den Code, der in Python "A und vorgeben B" ausgibt
Erstellen Sie mit Django einen LINE-Bot
[Python / Django] Erstellen Sie eine Web-API, die im JSON-Format antwortet
Holen Sie sich die IP-Adresse des Kunden mit Django
Beachten Sie, dass Sie die im Django-Vorlagenformular übergebenen Parameter Element für Element manuell dekorieren möchten
DJango Hinweis: Von Anfang an (Formularverarbeitung)
Holen Sie sich nur den Text aus dem Django-Formular.
Ich möchte eine API erstellen, die ein Modell mit einer rekursiven Beziehung im Django REST Framework zurückgibt
Testen Sie das Hochladen von Bildern, indem Sie in Python erstellen, ohne Dummy-Bilddateien in Django zu platzieren
Lassen Sie Code Day1 ab Null "1389. Zielarray in der angegebenen Reihenfolge erstellen"
Erstellen Sie ein Django-Projekt und eine Django-Anwendung in einer virtuellen Python-Umgebung und starten Sie den Server
Tool zum Einfügen des Ländernamens und des Ländercodes in einen Teil der IP-Adresse
DJango Memo: Von Anfang an (Erstellen einer Ansicht)
ImageKit generiert automatisch Miniaturansichten aus ImageField in Django
Erstellen Sie ein Datum / Uhrzeit-Objekt aus einer Zeichenfolge in Python (Python 3.3).
Ausgabe in Form eines Python-Arrays
So erstellen Sie eine Rest-API in Django
Bis Sie eine neue App in Django erstellen
Einfacher Code, der in Kaggles Titanic: Maschinelles Lernen aus Katastrophen eine Punktzahl von 0,81339 ergibt
[Django] Drücken Sie einen Befehl, den Sie in dem Prozess ausgeführt haben, der auf manage.py ausgeführt wird.
Erstellen Sie ein Flag in den Einstellungen, das nur beim Testen mit Django True ist
[Los] Erstellen Sie ein Tool, das den Rennwert des Pokémon zurückgibt, der von der Standardeingabe empfangen wurde
Code, der die Ansichtsnamen von URL-Resolvern in Django auflistet
[CRUD] [Django] Erstellen Sie eine CRUD-Site mit dem Python-Framework Django ~ 1 ~
Erstellen Sie unter Linux einen QR-Code für die URL
Lassen Sie uns eine Todo-App mit dem Django REST-Framework erstellen
Programmiersprache, die die Menschen vor NHK schützt
#Eine Funktion, die den Zeichencode einer Zeichenfolge zurückgibt
DJango Hinweis: Von Anfang an (mit einer generischen Ansicht)
DJango Hinweis: Von Anfang an (Erstellen einer Ansicht aus einer Vorlage)
Suchen Sie den Teil 575 aus Wikipedia in Python
Erstellen Sie in Python einen Dekorator, der Argumente dynamisch akzeptiert. Erstellen Sie einen Dekorator
[CRUD] [Django] Erstellen Sie eine CRUD-Site mit dem Python-Framework Django ~ 2 ~
[CRUD] [Django] Erstellen Sie eine CRUD-Site mit dem Python-Framework Django ~ 3 ~
[CRUD] [Django] Erstellen Sie eine CRUD-Site mit dem Python-Framework Django ~ 4 ~
[CRUD] [Django] Erstellen Sie eine CRUD-Site mit dem Python-Framework Django ~ 5 ~
[Django] Geben Sie Form einen dynamischen Anfangswert aus Model
Ein Programm, das die für iOS-App-Symbole in Python erforderliche Bildgröße automatisch ändert
Erstellen Sie ein Skript für Ihre Pepper-Fertigkeit in einer Tabelle und laden Sie SayText direkt aus dem Skript
So erstellen Sie einen Datensatz, indem Sie eine Beziehung zum geerbten Modell in das von Django geerbte Modell einfügen
Eine Geschichte, die das Debuggen von Modellen in der Django + SQLAlchemy-Umgebung einfacher macht
Analysieren Sie die Researchmap-API mit Python und erstellen Sie automatisch eine Word-Datei für die Leistungsliste
Ich habe ein Tool erstellt, um automatisch ein einfaches ER-Diagramm aus der Anweisung CREATE TABLE zu generieren
Eine Geschichte, die es ermöglichte, automatisch eine Anison-Wiedergabeliste aus Ihren Musikdateien zu erstellen
[Django] Eine Geschichte über das Feststecken in einem Sumpf beim Versuch, einen Reißverschluss mit einem Formular zu validieren [TDD]
Erstellen Sie einen Django-Zeitplan
Ein Werkzeug, das die Gacha von Soshage automatisch dreht
Erstellen Sie einen QR-Code, der durch Kratzen "Izumi Oishi" anzeigt
Code, der bei AttributeError Standardwerte festlegt
Erstellen Sie ein Plug-In, das in Sublime Text 2 immer beliebigen Text hervorhebt
Erstellen Sie einen Datenrahmen aus den erfassten Textdaten des Bootsrennens
Erstellen Sie einen lokalen Bereich in Python, ohne den Namespace zu verschmutzen
Ein Programm, das bestimmte Zeichen aus dem eingegebenen Text entfernt
Erstellen wir ein Skript, das sich bei Ideone.com in Python registriert.