Ich bin ein Universitätsstudent im dritten Jahr, der selbst Programmieren studiert.
Zuvor habe ich beim Erstellen einer Webanwendung in PHP [Formulareingabefelder dynamisch hinzugefügt] Qiita verwendet. Ich migriere derzeit meine Web-App nach Django, lasse sie aber hier, weil ich das Titelproblem nur schwer lösen konnte.
Nur das wurde in der Dokumentation geschrieben ...
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.
Ich versuche, den Code so präzise wie möglich zu halten, damit auch Anfänger ihn leicht verstehen können.
Wenn Sie sich bei diesem Artikel nicht sicher sind, ist es möglicherweise hilfreich, frühere Artikel zu lesen.
Wenn Django Formulare dynamisch verarbeiten soll, verwenden Sie Formsets '** empty_form **.
Eine ID wie "id_form- {No.} - place_name" wird automatisch in die "Eingabe" eines von Django generierten allgemeinen Formulars eingefügt. Wenn Sie jedoch ** empty_form ** verwenden, lautet die ID aller inputs id_form -__ plefix __- place_name, sodass Sie den Teil __plefix__ durch eine Nummer ersetzen müssen.
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>
In Wirklichkeit sieht es so aus.
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>
Schreiben Sie __prefix__ neu.
Geben Sie außerdem die Anzahl der Eingaben mit dem Wert der Eingabe [id = "id_form-TOTAL_FORMS"] an.
script.js
$(function() {
// clone
$('#btn-clone').click(function() {
var text = $('.text').last(); //Eingabe am Ende
clone = text.clone().insertAfter(text); //Fügen Sie am Ende eine Eingabe hinzu
clone.find("input[type='text']").val(''); //Der Wert wird ebenfalls geklont. Löschen Sie ihn daher
});
//Bedienen Sie die ID usw. für Django von hier aus
$('#form').submit(function() { //Kurz vor dem Absenden des Formulars
//Geben Sie die Anzahl der Eingabefelder im Formular an
const text = $('.text');
$('[name=form-TOTAL_FORMS]').val(text.length);
//In jedem Eingabefeld__prefix__Mit Index
text.each(function(index, element){
html = $(element).html().replace(/__prefix__/g, index);
value = $(element).find("input[type='text']").val(); //Speichern Sie den Wert, sobald er verschwindet
$(element).html(html);
$(element).find("input[type='text']").val(value);
});
});
});
Wenn Sie die Funktion zum Löschen von Formularen implementieren möchten, lesen Sie [Vorheriger Artikel] Qiita. Aus Gründen der Übersichtlichkeit haben wir hier nur das Hinzufügen von Formularen implementiert. Der Code ist redundant, da er die Funktion zum Löschen von Formularen endgültig implementieren soll. Wenn Sie die Funktion zum Löschen von Formularen nicht benötigen, korrigieren Sie sie bitte.
[Erstellen Sie eine Django-Formularklasse mit einer dynamischen Anzahl von Feldern (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