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

Question

我正在尝试创建一种方法，根据同一表单中另一个字段的绑定数据仅显示 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>