#Button to add form and delete button only on new forms

4 messages · Page 1 of 1 (latest)

rancid canyon
#

I'm on mobile looking for some suggestions for when I get back home later today to work on this, so I can't share any of my direct code right now.

I'm trying to build a page where I can add new items to a model, with a button to add and delete additional forms. So let's say I want to add 3 items but I accidentally click the "add form" button one too many times and need to delete it, how can I add a delete button to only the added forms and not the default one without reloading the page?

I've gotten close. The add button works to add new forms, but I can only seem to get the delete button to populate on all of the forms or none of the forms.

Suggestions for adding a delete button only for new items?

rancid canyon
#

This is my template page right now:

{% extends 'blog/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        $('.add-row').click(function() {
            let formIdx = $('#id_form-TOTAL_FORMS').val();
            let row = $('.empty-form .form-row').clone(true);
            row.html(row.html().replace(/__prefix__/g, formIdx));
            $('.formset .form-row:last').before(row);
            $('#id_form-TOTAL_FORMS').val(parseInt(formIdx) + 1);
            return false;
        });
    
        $(document).on('click', '.delete-row', function() {
            $(this).parents('.form-row').remove();
            let forms = $('.formset .form-row:not(.empty-form)');
            $('#id_form-TOTAL_FORMS').val(forms.length);
            for (let i=0, formCount=forms.length; i<formCount; i++) {
                $(forms.get(i)).find(':input').each(function() {
                    let idRegex = new RegExp('form-\\d+-');
                    let replacement = 'form-' + i + '-';
                    if ($(this).attr("for")) $(this).attr("for", $(this).attr("for").replace(idRegex, replacement));
                    if (this.id) this.id = this.id.replace(idRegex, replacement);
                    if (this.name) this.name = this.name.replace(idRegex, replacement);
                });
            }
            return false;
        });
    });
</script>
# 
{% if form.non_field_errors %}
    <div class="alert alert-danger">
        {% for error in form.non_field_errors %}
            {{ error }}
        {% endfor %}
    </div>
{% endif %}

<form method="post">
    {% csrf_token %}
    <div class="mb-2 d-flex align-items-center">
        <button id="add-form" type="button" class="btn btn-secondary btn-sm" style="padding: 10px 20px; margin-left: 20px;">Add another</button>
    </div>
    {{ formset.management_form }}
    <div id="form-set">
        {% for form in formset %}
            <div class="item form-row">
                {{ form.as_p }}
            </div>
        {% endfor %}
    </div>
    <input type="submit" class="btn btn-outline-success" value="Submit">
</form>
{% endblock %}