Question

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

我正在使用： Django 1.8.4 Bootstrap3 6.6.2

因为它与这个问题有关。以下是我目前使用编辑的工作保护字段值得到的内容。它确实有很多工作要做。这意味着表单很好，if语句最初起作用，但是一旦指定的字段发生了变化，它就不会重新评估if。

.img-hor-vert {
    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    filter: FlipH FlipV;
    -ms-filter: "FlipH FlipV";
}

解决方案：在Birdie的帮助下，我能够找到解决方案。对于那些在这里遇到同样的Django相关问题的人来说，你是如何根据同一表格中的另一个字段添加或删除字段的。

<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>

Answer 1

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

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

您需要查看HTML以确定您实际要隐藏的元素的ID（）和show（）。通常你会有一些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>

Answer 2

感谢大家的贡献，但是我无法获得上面工作的代码。这是我的解决方案：

<script>
    function hideField() {
      check = document.getElementsByName("put your field name here")[0].value;
      response = document.getElementById("put your id here");
      if (check === "Open") {
         response.style.display = "none";
        }else{
          response.style.display = "block";
        }
      }
  </script>

关键是要找出要隐藏的字段的ID，并为要检查的字段命名。我没有使用DIV容器来分配ID和名称，而是使用浏览器中的开发人员工具检查了呈现的HTML页面。让我知道您是否有疑问或需要更详细的说明。

Answer 3

我发现这个问题非常有趣。我已经使用引导程序4.0v更新了它，并使用了以下脚本，希望它可以对某人有所帮助：

<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('d-none');
        } else {
            $('#field_four').addClass('d-none');
        }
    }



    // 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>

显示基于Django表单中其他字段的表单字段

3 个答案: