Проблемы с динамическими формами

Question

Мне нужна помощь в создании динамического набора форм в django. Я понимаю, что требуется некоторый javascript. Я не эксперт по javascript. Но я нашел примерный код, и я стараюсь соответствовать ему, чтобы работать над моей конкретной формой. Когда я нажимаю кнопку «Добавить», ничего не происходит. И я не понимаю, как двигаться дальше. Какие-либо предложения?

Модель предназначена для регистрации участников. Клиент может зарегистрировать несколько человек для участия в мероприятии.
Попытка получить кнопку участника посещений.

# models.py 
class Customer(models.Model): 
    event = models.ForeignKey(Event) 
    first_name = models.CharField(max_length=30) 
    last_name = models.CharField(max_length=30) 
    address1 = models.CharField(max_length=60) 
    address2 = models.CharField(max_length=60, blank=True) 
    city = models.CharField(max_length=30) 
    state = models.CharField(max_length=2) 
    zipcode = models.CharField(max_length=5) 

class Attendee(models.Model): 
    event = models.ForeignKey(Event) 
    sponsor = models.ForeignKey(Customer) 
    first_name = models.CharField(max_length=30) 
    last_name = models.CharField(max_length=30) 

# forms.py 
CustomerFormset = inlineformset_factory(Customer, Attendee, form=AttendeeForm, exclude=('event'), extra=2) 

# templates/register.html 
<form action="/enroll/register3/{{ event.id }}/" method="post">{% csrf_token %} 
<p> Sponsor information: </p> 

<table> 
    {{ customer }} 
</table> 
<hr> 
<p> Students Attending: </p> 
{% for attendee in attendees.forms %} 
<div class="formgroup"> 
    {{ attendee }} 
    {% if attendee.nested %} 
    {% for formset in attendee.nested %} 
    {{ formset.as_table }} 
    {% endfor %} 
    {% endif %} 
</div> 
{% endfor %} 
<div> 
Nothing happens when 'add_more' is clicked. ?? 
<input type="button" value="Add Attendee" id="add_more"> 
<input type="submit" value="Submit"> 
</div> 
</form> 

<script> 
    $('#add_more').click(function() { 
     //cloneMore('div.table:last', 'service'); 
     cloneMore('div.table:last', 'formgroup'); 
    }); 

function cloneMore(selector, type) { 
    console.log('cloneMore'); 
    var newElement = $(selector).clone(true); 
    var total = $('#id_' + type + '-TOTAL_FORMS').val(); 
    newElement.find(':input').each(function() { 
     var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); 
     var id = 'id_' + name; 
     $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); 
    }); 
    newElement.find('label').each(function() { 
     var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); 
     $(this).attr('for', newFor); 
    }); 
    total++; 
    $('#id_' + type + '-TOTAL_FORMS').val(total); 
    $(selector).after(newElement); 
} 

</script> 

Answer 1

Похоже, что вы взяли JavaScript из this question, но вы не адаптировать структуру HTML.

Как я могу видеть в вашем фрагменте кода (который также выглядит, как он будет производить весьма недействительный HTML, т.е. тр в дивы.):

{% for attendee in attendees.forms %} 
<div class="formgroup"> 
    {{ attendee }} 
    {% if attendee.nested %} 
    {% for formset in attendee.nested %} 
    {{ formset.as_table }} 
    {% endfor %} 
    {% endif %} 
</div> 
{% endfor %} 

и его:

{{ serviceFormset.management_form }} 
{% for form in serviceFormset.forms %} 
    <div class='table'> 
    <table class='no_error'> 
     {{ form.as_table }} 
    </table> 
    </div> 
{% endfor %} 

Если вы хотите тот же самый точный фрагмент кода javascript, тогда вы должны иметь такую ​​же точную структуру HTML. Первое, что вы делаете в JS, - это передать div.table: последний как селектор, но у вас нет div.table в вашем HTML.

Ваш лучший выбор - попытаться самостоятельно создать javascript. Как разработчик веб-страницы, javascript вам очень поможет.