[JAVA] [Django] Créez un formulaire qui remplit automatiquement l'adresse à partir du code postal

On me demandera peut-être d'entrer l'adresse dans le formulaire de demande ou dans le formulaire d'inscription de l'utilisateur, mais lorsque j'entre le code postal, j'ai créé un formulaire dans lequel l'adresse est automatiquement saisie, il s'agit donc d'un mémo. Les formulaires modèles sont parfois utilisés dans les formulaires Django, mais cette fois j'ai pris la méthode de les écrire dans forms.py dans une application individuelle. Cette fois, j'ai utilisé ajaxzip3 pour le plug-in de remplissage automatique d'adresse.

Créez forms.py dans votre application

Créez forms.py du répertoire de l'application et écrivez ce qui suit.

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

Quand je l'ai écrit pour la première fois, j'ai pensé que zip22 était une mauvaise façon d'écrire, mais cela a fonctionné.

Charger le formulaire avec vue et passer au html

Pour le moment, en vue, il suffit de passer le formulaire en 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':
        //Décrivez le traitement après réception de la requête POST
    else:
        form = ContactForm()
        return render(request,
            'test/form.html',
            dict(form = form)
        )

Appliquer le formulaire au html

Formulaire d'appel en 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>

Cette fois, je regarde le fichier distant sur github, mais vous pouvez également le télécharger depuis ici, le stocker dans un dossier statique et le lire.


## Vérification Une fois implémenté dans l'exemple ci-dessus, le formulaire suivant sera créé. (On dirait que c'est parce que je n'ai appliqué aucun CSS) ![スクリーンショット 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 ") Si vous entrez un code postal dans le champ de saisie supérieur, l'adresse sera automatiquement saisie dans le champ de saisie inférieur.

Supplément

Si vous voulez que le code postal soit un champ

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>

Il semble que vous devriez écrire comme ci-dessus. En dehors de cela, vous voudrez peut-être diviser uniquement les préfectures en différents champs, mais veuillez vous référer à la documentation ajazip3 et aux liens de référence pour cela.

Supplément 2

Même lors de l'affichage des préfectures par déroulement, nous avons pu répondre comme suit

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

## Lien de référence https://github.com/ajaxzip3/ajaxzip3.github.io http://www.webdesign-fan.com/ajaxzip3

Recommended Posts

[Django] Créez un formulaire qui remplit automatiquement l'adresse à partir du code postal
Obtenir une adresse à partir d'un code postal
Créons une base de données clients où le code QR est automatiquement émis en Python
Créez le code qui renvoie "A et prétendant B" en python
Créer un bot LINE avec Django
[Python / Django] Créer une API Web qui répond au format JSON
Obtenez l'adresse IP du client avec Django
Notez que vous souhaitez décorer manuellement les paramètres passés dans le formulaire du modèle Django élément par élément
Remarque DJango: depuis le début (traitement de formulaire)
Récupérez uniquement le texte du formulaire Django.
Je souhaite créer une API qui retourne un modèle avec une relation récursive dans Django REST Framework
Créer en Python sans fichier image factice dans Django et tester le téléchargement de l'image
Let Code Day1 commençant à zéro "1389. Créer un tableau cible dans l'ordre indiqué"
Créer un projet et une application Django dans un environnement virtuel Python et démarrer le serveur
Outil pour insérer le nom du pays et le code du pays dans une partie de l'adresse IP
DJango Memo: depuis le début (création d'une vue)
ImageKit génère automatiquement des vignettes depuis ImageField dans Django
Créer un objet datetime à partir d'une chaîne en Python (Python 3.3)
Sortie sous la forme d'un tableau python
Comment créer une API Rest dans Django
Jusqu'à ce que vous créiez une nouvelle application dans Django
Code simple qui donne un score de 0,81339 dans Kaggle's Titanic: Machine Learning from Disaster
[Django] Appuyez sur une commande que vous avez effectuée à partir du processus qui s'exécute sur manage.py.
Créez un indicateur dans les paramètres qui seront True uniquement lors du test avec Django
[Go] Créez un outil qui renvoie la valeur de course du Pokémon reçu de l'entrée standard
Code qui énumère les noms de vue des résolveurs d'URL dans Django
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 1 ~
Créez un code QR pour l'URL sous Linux
Essayez de créer une application Todo avec le framework Django REST
Langage de programmation qui protège les gens de NHK
#Une fonction qui renvoie le code de caractère d'une chaîne de caractères
Remarque DJango: depuis le début (en utilisant une vue générique)
Remarque DJango: depuis le début (création d'une vue à partir d'un modèle)
Trouvez la partie 575 de Wikipedia en Python
En Python, créez un décorateur qui accepte dynamiquement les arguments Créer un décorateur
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 2 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 3 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 4 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 5 ~
[Django] Donne à Form une valeur initiale dynamique de Model
Un programme qui redimensionne automatiquement la taille d'image requise pour les icônes d'application iOS en Python
Créez un script pour votre compétence Pepper dans une feuille de calcul et chargez SayText directement à partir du script
Comment créer un enregistrement en collant une relation au modèle source d'héritage dans le modèle hérité par Django
Une histoire qui rend le débogage de modèle plus facile à voir dans l'environnement Django + SQLAlchemy
Analysez l'API Researchmap avec Python et créez automatiquement un fichier Word pour la liste des succès
J'ai créé un outil pour générer automatiquement un simple diagramme ER à partir de l'instruction CREATE TABLE
Une histoire qui a permis de créer automatiquement une liste de lecture Anison à partir de vos fichiers musicaux
[Django] Une histoire sur le fait de rester coincé dans un marais en essayant de valider un zip avec un formulaire [TDD]
Créer un planning Django
Un outil qui transforme automatiquement le gacha de Soshage
Créez un code QR qui affiche "Izumi Oishi" en grattant
Code qui définit les valeurs par défaut en cas d'AttributeError
Créez un plug-in qui met toujours en évidence le texte arbitraire dans Sublime Text 2
Créer un bloc de données à partir des données textuelles de course de bateaux acquises
Créer une portée locale en Python sans polluer l'espace de noms
Un programme qui supprime des caractères spécifiques du texte saisi
Créons un script qui s'enregistre avec Ideone.com en Python.