How to hide Django form fields using JavaScript, Jquery etc - Stack Overflow

admin管理员组

文章数量:1425127

I would like to dynamically hide form fields. The user should be able to select the ponent type, which could be a VALVE in which case the user should specify the Kv value and the DI and length fields should be hidden. Or the user could select the PIPE ponent type in which case the user should specify the inner diameter (DI) and length of the pipe and the k_v field should be hidden.

The model is defined as follows:

class Component(models.Model):

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

circuit                     = models.ForeignKey('circuit.Circuit', related_name='ponents', on_delete=models.CASCADE)
ponent_type              = models.IntegerField(default=1, choices = COMPONENT_TYPE_CHOICES)
ponent_name              = models.CharField(max_length=200)
branch_number_collectors    = models.IntegerField(default=4)

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

# Hide if ponent_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,
            ...,

The forms.py is as follows:

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

The simplified Django template is as follows:

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

I would like to dynamically hide form fields. The user should be able to select the ponent type, which could be a VALVE in which case the user should specify the Kv value and the DI and length fields should be hidden. Or the user could select the PIPE ponent type in which case the user should specify the inner diameter (DI) and length of the pipe and the k_v field should be hidden.

The model is defined as follows:

class Component(models.Model):

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

circuit                     = models.ForeignKey('circuit.Circuit', related_name='ponents', on_delete=models.CASCADE)
ponent_type              = models.IntegerField(default=1, choices = COMPONENT_TYPE_CHOICES)
ponent_name              = models.CharField(max_length=200)
branch_number_collectors    = models.IntegerField(default=4)

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

# Hide if ponent_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,
            ...,

The forms.py is as follows:

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

The simplified Django template is as follows:

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

• javascript
• django
• dynamic-forms

Share Improve this question Follow edited Mar 29, 2018 at 12:56 arne asked Mar 29, 2018 at 12:45 arnearne 22566 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

first go to django shell and then do the following:

python manage.py shell

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

this will give you all the id and class names you can use in your javascript or CSS to manipulate.

lets say you want to hide length then you will do:

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

Ok I solved the problem. When the user selects the PIPE option form the ponent_type dropdownlist the k_v field is hidden and the DI and length fields are shown. When the user selects the k_v option from the ponent_type dropdownlist the k_v field is shown and the length and DI fields are hidden.

My Django template is now as follows:

{% extends 'base.html' %}

<script>
{% block jquery %}

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

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

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected ponent_type 
function hideShow(){
    if(document.getElementById('id_ponent_type').options[document.getElementById('id_ponent_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 %}

本文标签： How to hide Django form fields using JavaScriptjquery etcStack Overflow