django - 根据 Django 表单中的其他字段显示表单字段

Question

我正在尝试创建一种方法，根据同一表单中另一个字段的绑定(bind)数据，仅显示 django 表单中的某些字段。我熟悉 form.field.bound_type 的想法，但我不确定如何不断检查表单中某个字段的状态更改并相应地更新另一个字段。例如，如果您在填写申请表并询问您是否犯罪，如果您单击是，则会弹出一个详细信息文本区域。

我正在使用:
Django 1.8.4
Bootstrap3 6.6.2

因为它与这个问题有关。这是我目前为工作保护编辑的字段值所得到的。它做了一些工作。这意味着表单很好，if 语句最初有效，但一旦指定的字段发生更改，它就不会重新评估 if。

<form action= "/send_email/" method="post" class='col-sm-5'>
    {% csrf_token %}
    {% bootstrap_field form.field_one%}
    {% bootstrap_field form.field_two%}
    {% bootstrap_field form.field_three%}
    {% if form.field_three.bound_data == "A Value" %}
        {% bootstrap_field form.field_four%}
    {% endif %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
        </button>
    {% endbuttons %}
</form>

解决方案:
在 Birdie 的帮助下，我找到了解决方案。对于遇到相同 Django 相关问题的任何人，这里是如何添加或删除基于同一表单中的另一个字段的字段。

<script>

    // function that hides/shows field_four based upon field_three value
    function check_field_value(new_val) {
        if(new_val != 'A value') {
            // #id_field_four should be actually the id of the HTML element
            // that surrounds everything you want to hide.  Since you did
            // not post your HTML I can't finish this part for you.
            $('#field_four').removeClass('hidden');
        } else {
            $('#field_four').addClass('hidden');
        }
    }



    // this is executed once when the page loads
    $(document).ready(function() {

        // set things up so my function will be called when field_three changes
        $('#field_three').change( function() {
            check_field_value(this.value);
        });

    });

</script>
<form action= "/send_email/" method="post" class='col-sm-5'>
    {% csrf_token %}
    {% bootstrap_field form.field_one%}
    {% bootstrap_field form.field_two%}
    <div id="field_three">{% bootstrap_field form.field_three%}</div>
    <div id="field_four">{% bootstrap_field form.additional_notes %}</div>
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
        </button>
    {% endbuttons %}
</form>

Answer 1

您不能在模板中执行此操作，因为模板在服务器端执行，但用户交互发生在客户端.. 在浏览器中。这必须在 javascript 中完成并在浏览器中运行。

这是执行此操作的 jQuery 代码示例。我没有测试它，所以它可能需要调整，但这应该会让你朝着正确的方向前进。

您将需要查看 HTML 以确定您实际想要 hide() 和 show() 的元素的 id。通常，您会在要隐藏的一个或多个字段以及标签周围使用某种 HTML 元素(例如 DIV)。您可以通过隐藏包含所有内容的元素来一次性隐藏所有内容字段，而不是每个单独的字段本身。

如果您将围绕 field_four 的 HTML 添加到您的问题中，我将更新答案以使用您所拥有的...

<script>
// Ideally this script (javascript code) would be in the HEAD of your page
// but if you put it at the bottom of the body (bottom of your template) that should be ok too.
// Also you need jQuery loaded but since you are using bootstrap that should
// be taken care of.  If not, you will have to deal with that.

    // function that hides/shows field_four based upon field_three value
    function check_field_value() {
        if($(this).val() == 'A Value') {
            // #id_field_four should be actually the id of the HTML element
            // that surrounds everything you want to hide.  Since you did
            // not post your HTML I can't finish this part for you.  
            $('#id_field_four').hide();
        } else {
            $('#id_field_four').show();
        }
    }

    // this is executed once when the page loads
    $(document).ready(function() {
        // set things up so my function will be called when field_three changes
        $('#id_field_three').change(check_field_value);

        // set the state based on the initial values
        check_field_value.call($('#id_field_three').get(0));
    });

</script>