Question

一个新手，我遇到了一个问题，我觉得在尝试之前我更多地阅读了它。现在，因为我在尝试它让我感到困惑。希望你能抽出一些时间来帮忙。

这是我想要做的。

我想在HTML上动态添加模型表单字段。所以对于前用户正在尝试向配方添加步骤，他/她可以添加多个步骤，甚至可以删除其中的一些步骤。我想让它在自己渲染的页面上动态发生。

我想从一个非常简单的例子开始。

我在django docs中准备好了formset和model formset。此外，已经经历了许多SO答案。有许多实例在不使用formset的情况下添加这些字段。

我已经尝试过几个例子，但我认为我正在混淆我读过的所有内容。

另外，我的js并不是那么强大，但是我用它来试验它们似乎不起作用的例子，但它们不那么令我担心。

以下是我在SO上的一个答案中尝试的代码：

views.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 })

forms.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的formset得到这个。

Answer 1

您正在为form_count分配字符串：

form_count = $("[name=extra_field_count");

并尝试增加它。

form_count ++;

尝试改为：

form_count = parseInt($("#id_extra_field_count").val(),10);

动态添加和删除django模板

1 个答案: