modelformset_factory
13 views
Skip to first unread message
Roberto Bressanelli
Oct 20, 2022, 6:50:25 PM10/20/22
to Django Brasil
Boa tarde.
Ao utilizar o método modelformset_factory e um código em javascript eu consigo exibir vários forms no html, mas a cada adição, todos são exibidos. Eu preciso que somente 1 seja exibido por vez, mas no código que eu encontrei não consigo implementar desta maneira.
Agradeço por qualquer dica.
Agradeço por qualquer dica.
O código original é o seguinte:
forms.py
from django.forms import modelformset_factory
from .models import Bird
BirdFormSet = modelformset_factory(
Bird, fields=("common_name", "scientific_name"), extra=1
)
views.py
class BirdAddView(TemplateView):
template_name = "teste_code/add_bird.html"
def get(self, request, *args, **kwargs):
formset = BirdFormSet(queryset=Bird.objects.none())
return self.render_to_response({'bird_formset': formset})
def post(self, request, *args, **kwargs):
formset = BirdFormSet(dataview=self.request.POST)
if formset.is_valid():
formset.save()
return redirect(reverse_lazy("bird_list"))
return self.render_to_response({'bird_formset': formset})
add_bird.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add bird</title>
</head>
<body>
<h1>Add a new bird</h1>
<form id="form-container" method="POST">
{% csrf_token %}
{{ bird_formset.management_form }}
{% for form in bird_formset %}
<div class="bird-form">
{{form.as_p}}
</div>
{% endfor %}
<button id="add-form" type="button">Add Another Bird</button>
<button type="submit">Create Birds</button>
<button type="button" onclick="history.back()">BACK</button>
</form>
<script>
let birdForm = document.querySelectorAll(".bird-form")
let container = document.querySelector("#form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = birdForm.length - 1
addButton.addEventListener('click', addForm)
function addForm(e) {
e.preventDefault()
let newForm = birdForm[0].cloneNode(true)
let formRegex = RegExp(`form-(\\d){1}-`,'g')
formNum++
newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)
container.insertBefore(newForm, addButton)
totalForms.setAttribute('value', `${formNum + 1}`)
}
</script>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages