I need django inline dynamic [closed] - django

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 days ago.
Improve this question
Basically I have this screen and according to the value selected in “metodo_pagamento” I want to display the amount of inline form, example if I select “2 Parcelas”, it shows 2 forms inline, but I wanted to do this dynamically how do I do that too to update and delete?formlike this:
models.py
class Despesas(models.Model):
METODO = (
("1", "1 Parcela"),
("2", "2 Parcelas"),
("3", "3 Parcelas"),
("4", "4 Parcelas"),
)
descricao = models.CharField(max_length=100)
metodo_pagamento = models.CharField(max_length=50, choices=METODO, default="A vista")
def __str__(self):
return self.descricao
class Parcelas(models.Model):
despesa = models.ForeignKey(Despesas, on_delete=models.CASCADE)
data_pagamento = models.DateField(null=True)
valor = models.FloatField(null=True)
def __str__(self):
return str(self.despesa.id)
forms.py
class DespesasForm(forms.ModelForm):
METODO = (
("1", "1 Parcela"),
("2", "2 Parcelas"),
("3", "3 Parcelas"),
("4", "4 Parcelas"),
)
metodo_pagamento = forms.CharField(max_length=50, widget= forms.Select(choices=METODO, attrs = {'onchange': "updateInlineForm();", 'default':""}))
views.py
class CadastrarDespesa(LoginRequiredMixin, GroupRequiredMixin, CreateView):
group_required = u"Admin"
login_url = 'login'
template_name = "formularios/form_cadastro_despesa.html"
def get(self, *args, **kwargs):
form = DespesasForm()
context = {
'form': form,
'titulo':"Cadastrar despesa"
}
return self.render_to_response(context)
form_cadastro_despesa.html
<div class="row">
<div class="col-lg-3">
<div class="container text-center" style="margin-top: 70px; margin-left:650px; text-align:center">
<form method="POST" action="">
{% csrf_token %}
{{form|crispy}}
<div id="inline-form-section">
<!-- Inline form fields will be added here dynamically -->
</div>
<button type="submit" class="btn btn-success" style="margin-top:20px;margin-bottom: 20px;">{{titulo}}</button>
</form>
</div>
</div>
</div>
function updateInlineForm() {
var method = document.getElementById("id_metodo_pagamento").value;
var inlineFormSection = document.getElementById("inline-form-section");
inlineFormSection.innerHTML = ""; // Clear the existing fields
for (var i = 1; i <= method ; i++) {
if (method == 1){
inlineFormSection.innerHTML +=
`
<br>
<label for="parcela1">Data pagamento:</label>
<input class="form-control" type="date" id="parcela1" name="parcela1" required="true">
<br>
<label for="valor1">Status do pagamento</label>
<select class="form-control" id="status" name="status1">
<option value="Pendente">Pendente</option>
<option value="Pago">Pago</option>
</select>
<br>
<label for="parcela1">Valor do pagamento:</label>
<input type="number" class="form-control" id="valorparcela1" value="${total}" name="valorparcela1" required="true" onchange="validacao_parcela(this.id,${valor_parcela});">
`;
} else {
inlineFormSection.innerHTML +=
`
<br>
<label for="parcela${i}">Data ${i}° parcela:</label>
<input class="form-control" type="date" id="parcela${i}" name="parcela${i}" required="true">
<br>
<label for="valor${i}">Status ${i}° parcela</label>
<select class="form-control" id="status" name="status${i}">
<option value="Pendente">Pendente</option>
<option value="Pago">Pago</option>
</select>
<br>
<label for="parcela${i}">Valor da ${i}° parcela:</label>
<input class="form-control" type="number" value="${valor_parcela}" id="valorparcela${i}" name="valorparcela${i}" required="true" onchange="validacao_parcela(this.id,${valor_parcela});">
<br>
`;
}
}
}
In this way that i did in using javascript onchange, but its dificult make update when user select other “Metodo pagamento”, anyone can help me?

Answer 1

To dynamically display the number of inline forms based on the selected value in the "metodo_pagamento" field, you can use JavaScript and update the HTML dynamically based on the selected value