初心者ですが、問題に行き詰まっており、試してみる前にそれについて読みすぎていることが原因だと感じています。そして今、私は試しているので、私を混乱させています。少しお時間をいただけますと幸いです。
これが私がやろうとしていることです。
HTML にモデル フォーム フィールドを動的に追加したいと考えています。たとえば、ユーザーがレシピにステップを追加しようとすると、複数のステップを追加でき、これらのステップの一部を削除することさえできます。私はこれがレンダリングされたページ自体で動的に発生することを望んでいます。
非常に単純な例から始めたいと思います。
私はdjango docsでフォームセットとモデルフォームセットを用意しました。また、多くのSO回答を経験しました。フォームセットを使用せずにこれらのフィールドを追加する例が多数あります。
私はいくつかの例で自分で試してみましたが、読んだことすべてを混同していると思います.
また、私のjsはそれほど強力ではありませんが、試した例ではそれを使用しましたが、動作していないように見えますが、私の心配は少ないです。
SOの回答の1つから試したコードは次のとおりです。
ビュー.py
def myview(request):
if request.method == 'POST':
form = MyForm(request.POST, extra=request.POST.get('extra_field_count'))
if form.is_valid():
print "valid!"
else:
form = MyForm()
return render(request, "test/test.html", { 'form': form })
フォーム.py
class MyForm(forms.Form):
original_field = forms.CharField()
extra_field_count = forms.CharField(widget=forms.HiddenInput())
def __init__(self, *args, **kwargs):
extra_fields = kwargs.pop('extra', 0)
super(MyForm, self).__init__(*args, **kwargs)
self.fields['extra_field_count'].initial = extra_fields
for index in range(int(extra_fields)):
# generate extra fields in the number specified via extra_fields
self.fields['extra_field_{index}'.format(index=index)] = \
forms.CharField()
テンプレート
{% extends 'base.html' %}
<script>
{% block jquery %}
form_count = $("[name=extra_field_count");
// get extra form count so we know what index to use for the next item.
$("#add-another").click(function() {
element = $('<input type="text"/>');
element.attr('name', 'extra_field_' + form_count);
$("#forms").append(element);
// build element and append it to our forms container
form_count ++;
$("[name=extra_field_count]").val(form_count);
// increment form count so our view knows to populate
// that many fields for validation
})
{% endblock %}
</script>
{% block content %}
<form method="POST">{% csrf_token %}
<div id="forms">
{{ form.as_p }}
</div>
<button id="add-another">add another</button>
<input type="submit" />
</form>
{% endblock %}
うーん、これはうまくいきませんでした。[別のフィールドを追加] をクリックすると、ページがリロードされ、この値エラー「基数 10 の int() に対して無効なリテラル: 'NaN'」が表示されます。とにかく、これが私にとって正しい解決策であるかどうかはわかりません。ModelFormのフォームセットでこれを取得することに少し混乱しました。