Django Formset에서 동적으로 폼 추가하기
Django Formset에서 동적으로 폼 추가하기
JavaScript 사용
1 HTML 템플릿
먼저, 템플릿에 다음과 같이 폼 추가 버튼을 추가합니다.
<button id="add-form-button" type="button">폼 추가</button>
2 JavaScript 코드
다음은 JavaScript 코드 예시입니다. jQuery 라이브러리를 사용하여 폼 추가 버튼을 클릭하면 새 폼을 동적으로 추가합니다.
$(document).ready(function() {
const formset = $('#my-formset');
const addFormButton = $('#add-form-button');
addFormButton.on('click', function() {
const newForm = formset.children().last().clone();
newForm.find('input').val('');
newForm.appendTo(formset);
});
});
3 장점 및 단점
- 장점:
- 비교적 간단하고 구현하기 쉽습니다.
- 추가적인 라이브러리가 필요하지 않습니다.
- 단점:
- JavaScript 코드를 직접 작성해야 합니다.
- 페이지 새로고침이 필요합니다.
FormMixin 사용
1 FormMixin
Django에서 제공하는 FormMixin
클래스를 사용하여 동적으로 폼을 추가할 수 있습니다.
from django.forms.mixins import FormMixin
class MyFormMixin(FormMixin):
def get_form_kwargs(self):
kwargs = super().get_form_kwargs()
kwargs['initial'] = self.get_initial_form_data()
return kwargs
def get_initial_form_data(self):
# 동적으로 추가될 폼의 초기 데이터를 설정합니다.
return {}
2 views.py
다음은 FormMixin
을 사용하는 views.py
예시입니다.
from django.views.generic import FormView
class MyFormView(FormView):
form_class = MyFormMixin
template_name = 'my_form.html'
def get_form_kwargs(self):
kwargs = super().get_form_kwargs()
kwargs['formset'] = self.get_formset()
return kwargs
def get_formset(self):
# Formset을 생성하고 초기 데이터를 설정합니다.
return MyFormset(initial=[self.get_initial_form_data()])
- 장점:
- JavaScript 코드 없이 동적으로 폼을 추가할 수 있습니다.
- 페이지 새로고침 없이 폼을 추가할 수 있습니다.
- 단점:
FormMixin
클래스를 상속받아야 합니다.- 코드가 조금 더 복잡해집니다.
참고:
결론
예제 코드: Django Formset에서 동적으로 폼 추가하기
JavaScript 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Django Formset 예제</title>
</head>
<body>
<h1>폼 추가 예제</h1>
<form action="/submit/" method="post">
{% csrf_token %}
<div id="my-formset">
{% for form in formset %}
<div class="form-row">
{{ form.as_p }}
</div>
{% endfor %}
</div>
<button type="submit">저장</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const formset = $('#my-formset');
const addFormButton = $('#add-form-button');
addFormButton.on('click', function() {
const newForm = formset.children().last().clone();
newForm.find('input').val('');
newForm.appendTo(formset);
});
});
</script>
</body>
</html>
$(document).ready(function() {
const formset = $('#my-formset');
const addFormButton = $('#add-form-button');
addFormButton.on('click', function() {
const newForm = formset.children().last().clone();
newForm.find('input').val('');
newForm.appendTo(formset);
});
});
from django.views.generic import FormView
class MyFormView(FormView):
template_name = 'my_form.html'
formset_class = MyFormset
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['formset'] = self.get_formset()
return context
def get_formset(self):
# Formset을 생성합니다.
return self.formset_class()
FormMixin 사용
from django.forms.mixins import FormMixin
class MyFormMixin(FormMixin):
def get_form_kwargs(self):
kwargs = super().get_form_kwargs()
kwargs['initial'] = self.get_initial_form_data()
return kwargs
def get_initial_form_data(self):
# 동적으로 추가될 폼의 초기 데이터를 설정합니다.
return {}
from django.views.generic import FormView
class MyFormView(FormView):
form_class = MyFormMixin
template_name = 'my_form.html'
def get_form_kwargs(self):
kwargs = super().get_form_kwargs()
kwargs['formset'] = self.get_formset()
return kwargs
def get_formset(self):
# Formset을 생성하고 초기 데이터를 설정합니다.
return MyFormset(initial=[self.get_initial_form_data()])
- 이 예제 코드는 기본적인 예시이며, 상황에 맞게 수정해야 할 수 있습니다.
- Formset의 필드에 대한 유효성 검사 등을 추가해야 합니다.
추가 정보
Django Formset에서 동적으로 폼 추가하기: 대체 방법
Ajax 사용
- 단점:
- Ajax 코드를 작성해야 합니다.
- 서버 측 코드를 추가해야 합니다.
2 템플릿
<button id="add-form-button" type="button">폼 추가</button>
<script>
$(document).ready(function() {
const addFormButton = $('#add-form-button');
addFormButton.on('click', function() {
$.ajax({
url: '/add_form/',
method: 'POST',
success: function(data) {
// 새 폼을 템플릿에 추가합니다.
$('#my-formset').append(data);
}
});
});
});
</script>
def add_form(request):
form = MyForm()
context = {'form': form}
return render(request, 'my_form_template.html', context)
직접 HTML 코드 추가
- 장점:
- 가장 간단한 방법입니다.
- JavaScript 또는 Ajax 코드가 필요하지 않습니다.
- 단점:
- 코드가 지저분해질 수 있습니다.
<div id="my-formset">
{% for form in formset %}
<div class="form-row">
{{ form.as_p }}
</div>
{% endfor %}
</div>
<button type="submit">저장</button>
$(document).ready(function() {
const formset = $('#my-formset');
const addFormButton = $('#add-form-button');
addFormButton.on('click', function() {
const newForm = `
<div class="form-row">
<input type="text" name="name" />
<input type="text" name="email" />
</div>
`;
formset.append(newForm);
});
});
선택 가이드
다음은 상황에 맞는 방법을 선택하는 데 도움이 되는 가이드입니다.
- 간단한 방법: 직접 HTML 코드를 추가하는 방법이 가장 간단하지만, 페이지 새로고침이 필요하고 코드가 지저분해질 수 있습니다.
- JavaScript 사용: JavaScript를 사용하면 페이지 새로고침 없이 폼을 추가할 수 있지만, JavaScript 코드를 작성해야 합니다.
- Ajax 사용: Ajax를 사용하면 JavaScript 코드 없이 페이지 새로고침 없이 폼을 추가할 수 있지만, Ajax 코드와 서버 측 코드를 추가해야 합니다.
- FormMixin 사용:
FormMixin
클래스를 사용하면 JavaScript 코드 없이 페이지 새로고침 없이 폼을 추가할 수 있지만, 코드가 조금 더 복잡해집니다.
결론
django