Je suis un étudiant de troisième année à l'université, étudiant seul la programmation.
Auparavant, lorsque je créais une application Web en PHP, j'utilisais [ajouter dynamiquement des champs de saisie de formulaire] Qiita. Je suis en train de migrer mon application Web vers Django, mais je n'ai pas résolu le problème du titre, je vais donc le laisser ici.
Seulement cela a été écrit dans la documentation ...
empty_form BaseFormSet provides an additional attribute empty_form which returns a form instance with a prefix of prefix for easier use in dynamic forms with JavaScript.
J'essaie de garder le code aussi concis que possible afin que même les débutants puissent le comprendre facilement.
Si vous ne comprenez pas cet article seul, vous trouverez peut-être utile de lire l'article précédent.
Si vous souhaitez que Django gère les formulaires de manière dynamique, utilisez Formsets '** empty_form **.
Un identifiant tel que ʻid_form- {No.} - Place_name est automatiquement inséré dans ʻinput d'un formulaire général généré par Django. Cependant, si ** empty_form ** est utilisé, l'id de tous les ʻinput sera ʻid_form -__ plefix __- place_name, il est donc nécessaire de remplacer la partie __plefix__ par un nombre.
template.html
<form method="POST" id="form">
{% csrf_token %}
{{ form.management_form }}
<div class="text">
{{ form.empty_form.as_p }}
</div>
<button type="button" id="btn-clone">clone</button>
<button type="submit">submit</button>
</form>
En réalité, ça ressemble à ça.
template.html
<form method="POST" id="form">
<!-- ...... -->
<input type="hidden" name="form-TOTAL_FORMS" value="2" id="id_form-TOTAL_FORMS">
<!-- ...... -->
<div class="text">
<p>
<label for="id_form-__prefix__-place_name">Input:</label>
<input type="text" name="form-__prefix__-place_name" id="id_form-__prefix__-place_name">
<input type="hidden" name="form-__prefix__-id" id="id_form-__prefix__-id">
</p>
</div>
<button type="button" id="btn-clone">clone</button>
<button type="submit">submit</button>
</form>
Réécrivez «prefix».
Spécifiez également le nombre de ʻinputavec la valeur de ʻinput [id = "id_form-TOTAL_FORMS"].
script.js
$(function() {
// clone
$('#btn-clone').click(function() {
var text = $('.text').last(); //Entrée à la fin
clone = text.clone().insertAfter(text); //Ajouter une entrée à la fin
clone.find("input[type='text']").val(''); //la valeur est également clonée, supprimez-la
});
//Faites fonctionner id etc. pour Django à partir d'ici
$('#form').submit(function() { //Juste avant de soumettre le formulaire
//Spécifiez le nombre de champs de saisie sur le formulaire
const text = $('.text');
$('[name=form-TOTAL_FORMS]').val(text.length);
//Dans chaque champ de saisie__prefix__Avec index
text.each(function(index, element){
html = $(element).html().replace(/__prefix__/g, index);
value = $(element).find("input[type='text']").val(); //Enregistrez la valeur lorsqu'elle disparaît
$(element).html(html);
$(element).find("input[type='text']").val(value);
});
});
});
Si vous souhaitez implémenter la fonction de suppression de formulaire, consultez [Article précédent] Qiita. Nous n'avons implémenté que l'ajout de formulaires ici pour plus de clarté. Le code est redondant car il est censé implémenter finalement la fonction de suppression de formulaire. Si vous n'avez pas besoin de la fonction de suppression de formulaire, veuillez la corriger.
[Créer une classe de formulaire Django avec un nombre dynamique de champs (it-swarm.dev)](https://www.it-swarm.dev/ja/python/%E5%8B%95%E7%9A % 84% E3% 81% AA% E3% 83% 95% E3% 82% A3% E3% 83% BC% E3% 83% AB% E3% 83% 89% E6% 95% B0% E3% 82% 92 % E6% 8C% 81% E3% 81% A4django% E3% 83% 95% E3% 82% A9% E3% 83% BC% E3% 83% A0% E3% 82% AF% E3% 83% A9% E3 % 82% B9% E3% 82% 92% E4% BD% 9C% E6% 88% 90% E3% 81% 99% E3% 82% 8B / 971177164 /)
Recommended Posts