Fatal编程技术网
  • javascript/
  • 使用Javascript逐个添加Django MultipleChoiceField

使用Javascript逐个添加Django MultipleChoiceField

javascript django

使用Javascript逐个添加Django MultipleChoiceField,javascript,django,Javascript,Django,我正在基于以下表格编写Django视图： class MyForm(forms.Form): def __init__(self, data, examen, *args, **kwargs): super(MyForm, self).__init__(data, *args, **kwargs) self.fields['q1'] = forms.MultipleChoiceField( label=mark_safe(

我正在基于以下表格编写Django视图：

class MyForm(forms.Form):
    def __init__(self, data, examen, *args, **kwargs):
        super(MyForm, self).__init__(data, *args, **kwargs)

        self.fields['q1'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 1"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 1'), ('2', 'answer 2'), ('3', 'answer 3'))
                )
        self.fields['q2'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 2"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 4'), ('2', 'answer 5'), ('3', 'answer 6'))
                )
        ... #TODO : add questions q3 to q9
        self.fields['q10'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 10"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 28'), ('2', 'answer 29'), ('3', 'answer 30'))
                )
我想用一个[submit]按钮在单个视图上显示自己的字段['q1']。用户可以选择他认为正确的答案，然后点击[submit]按钮。此后，
self.fields['q1']
将变为只读，
self.fields['q2']
将在下方再次显示一个[submit]按钮。。。和子，直到
self.fields['q10']

我相信实现这一点的唯一方法是使用Javascript（甚至JQuery或任何其他库）。问题是我对Javascript不是很熟悉，我很乐意得到一些关于如何解决这个问题的提示

谢谢你所做的一切

PS：如果你认为这不是实现我目标的正确方式，我很高兴改变我的Django设计

编辑2019年11月29日：我当前的模板如下所示：

<form action="{% url 'quizz' my_exam %}" method="post">

    {% csrf_token %}
    {% for field in form %}

        {% ifequal forloop.counter0 0 %}
        <div class="card text-white bg-primary mb-3">
            <div class="card-body">
                <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
            </div>
        </div>
        {% else %}
            <div class="card">
                <h5 class="card-header">{{field.name}}</h5>
                <div class="card-body">
                    <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                    <p class="card-text">{{ field }}</p>
                </div>
            </div>
        {% endifequal %}


    {% endfor %}

    <input type="submit" value="Submit" class="btn btn-primary"/>

</form>


{%csrf_令牌%}
{%形式的字段为%}
{%ifequalforloop.counter0%}
{field.label | linebreaksbr}}
{%else%}
{{field.name}
{field.label | linebreaksbr}}

{{field}

{%endifequal%}
{%endfor%}
编辑2019年11月30日：基于@Phanti建议的新模板：

<script>
{% block jquery %}

    $("#submit_2").click(function() {
        $("#questions_container").find(":hidden").show().next();
    }

{% endblock %}
</script>


{% block content %}
<form action="{% url 'quizz' exam %}" method="post">

    {% csrf_token %}

    <div id="questions_container">
    {% for field in form %}

        {% ifequal forloop.counter 1 %}
        <div class="card text-white bg-primary mb-3">
            <div class="card-body">
                <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
            </div>
        </div>
        {% else %}              
                {% ifequal forloop.counter 2 %}
                    <div id="question_{{ forloop.counter }}" class="card" style="display: block;">
                        <h5 class="card-header">{{field.name}}</h5>
                        <div class="card-body">
                            <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                            <p class="card-text">{{ field }}</p>
                        </div>
                    </div>

                    <input id="submit_{{ forloop.counter }}" value="Valider" class="btn btn-primary" style="display: block;"/>
                {% else %}

                    <div id="question_{{ forloop.counter }}" class="card" style="display: none;">
                        <h5 class="card-header">{{field.name}}</h5>
                        <div class="card-body">
                            <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                            <p class="card-text">{{ field }}</p>
                        </div>
                    </div>


                    {% if not forloop.last %}
                        <input id="submit_{{ forloop.counter }}" value="Submit" class="btn btn-primary" style="display: none;"/>
                    {% else %}
                        <input id="submit_{{ forloop.counter }}" type="submit" value="Submit" class="btn btn-primary" style="display: none;"/>
                    {% endif %}

                {% endifequal %}

        {% endifequal %}      

    {% endfor %}
    </div>

</form>
{% endblock %}


{%block jquery%}
$（“#提交_2”）。单击（函数（）{
$（“#问题_容器”）.find（“：hidden”）.show（）.next（）；
}
{%endblock%}
{%block content%}
{%csrf_令牌%}
{%形式的字段为%}
{%ifequal forloop.counter 1%}
{field.label | linebreaksbr}}
{%else%}
{%ifequal forloop.counter 2%}
{{field.name}
{field.label | linebreaksbr}}

{{field}

{%else%}
{{field.name}
{field.label | linebreaksbr}}

{{field}

{%if不是forloop.last%}
{%else%}
{%endif%}
{%endifequal%}
{%endifequal%}
{%endfor%}
{%endblock%}
你的模板是什么样子的？使用JS，你可以在默认情况下隐藏q2-q10元素，除非用户选择/回复q1等等。@Phanti谢谢你的回答。我刚刚添加了我的html模板。这可能是一个虚拟问题，但你会如何隐藏？你可以为每个表单分配唯一的html ID。然后使用JS/jQue我需要进一步操作如何显示表单的逻辑。这包括几种不同的技术/语言。@Phanti我认为只有在字段最多为'q10'的情况下它才有效吗？例如，如果我想将表单升级到'q12'，我需要更新我的html，对吗？您是否有一个片段或到教程的链接做这些类型的操作，这样我就可以尝试使它适应我的目标？谢谢。不用担心，你也可以在JS中使用循环。你的模板是什么样子的？使用JS，你可以默认隐藏q2-q10元素，除非用户选择/回复q1等等。@Phanti谢谢你的回答。我刚刚添加了我的html模板。它可能是一个d嗯，我的问题是，但是你会如何隐藏？你可以为每个表单分配唯一的html ID。然后使用JS/jQuery进一步操作如何显示表单的逻辑。这包括几种不同的技术/语言。@Phanti我认为只有在字段最多为'q10'时它才有效吗？例如，如果我t要将我的表单升级到'q12'，我需要更新我的html，对吗？你是否有一个片段或一个到教程的链接来进行这些操作，以便我可以尝试将其调整到我的目标？谢谢。不用担心，你也可以在JS中使用循环。