如何使用 JavaScript、Jquery 等隐藏 Django 表单字段

Question

我想动态隐藏表单字段。用户应该能够 select 组件类型，它可以是 VALVE，在这种情况下，用户应该指定 Kv 值，并且应该隐藏 DI 和长度字段。或者用户可以 select PIPE 组件类型，在这种情况下，用户应指定管道的内径 (DI) 和长度，并且应隐藏 k_v 字段。

模型定义如下：

class Component(models.Model):

COMPONENT_TYPE_CHOICES = (
    (1, 'k_v'),
    (2, 'pipe')
)

circuit                     = models.ForeignKey('circuit.Circuit', related_name='components', on_delete=models.CASCADE)
component_type              = models.IntegerField(default=1, choices = COMPONENT_TYPE_CHOICES)
component_name              = models.CharField(max_length=200)
branch_number_collectors    = models.IntegerField(default=4)

# Hide if component_type==2 
k_v                         = models.FloatField(default=1)

# Hide if component_type==1
DI                         = models.FloatField(default=0.025)
length                      = models.FloatField(default=1)

# Calculated properties
branch_volumetric_flow_rate = models.FloatField(default=0)
branch_mass_flow_rate       = models.FloatField(default=0)

velocity                    = models.FloatField(default=0)
reynolds                    = models.FloatField(default=0)
friction_coefficient        = models.FloatField(default=0)
pressure_loss               = models.FloatField(default=0)

@classmethod
def create( cls, 
            circuit,
            ...,

forms.py如下：

class ComponentForm(forms.ModelForm):
    class Meta:
        model = Component
        fields = [
            'component_type',
            'component_name',
            'branch_number_collectors',
            'k_v',
            'DI',
            'length'
        ]

简化后的Django模板如下：

{% block content %}
<form method='POST'> {% csrf_token %}
    {{ form.as_p }}
    <button type='submit'>Save</button>
</form>
{% endblock %}

Answer 1

首先转到 django shell 然后执行以下操作：

python manage.py shell

from yourapp.yourform import ComponentForm
f = ComponentForm()
print(f.as_p())

这将为您提供所有 id 和 class 名称，您可以在 javascript 或 CSS 中使用这些名称进行操作。

假设你想隐藏 length 那么你会做：

$(document).ready(function(){
    $('#id_length').hide();
})

Answer 2

好的，我解决了问题。当用户从 component_type 下拉列表中选择 PIPE 选项时，k_v 字段被隐藏，DI 和长度字段被显示。当用户从 component_type 下拉列表中选择 k_v 选项时，将显示 k_v 字段并隐藏长度和 DI 字段。

我的 Django 模板现在如下：

{% extends 'base.html' %}

<script>
{% block jquery %}

    // Call hideShow when page is loaded
    $(document).ready(function(){
        hideShow()
    })

    // call hideShow when the user clicks on the component_type dropdownlist
    $('#id_component_type').click(function(){
        hideShow()
    });

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected component_type 
function hideShow(){
    if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "1")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_DI').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_DI').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}
{% endblock %}
</script>


{% block content %}
<form method='POST'> {% csrf_token %}
    {{ form.as_p }}
    <button type='submit'>Save</button>
</form>
{% endblock %}

如何使用 JavaScript、Jquery 等隐藏 Django 表单字段

How to hide Django form fields using JavaScript, Jquery etc

javascript

django

dynamic-forms