CODEWITHSUNDEEP
javascriptdjangodynamic-forms
arne
arne

Reputation: 225

How to hide Django form fields using JavaScript, Jquery etc

I would like to dynamically hide form fields. The user should be able to select the component 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 component 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='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,
            ...,

The forms.py is as follows:

class ComponentForm(forms.ModelForm):
    class Meta:
        model = Component
        fields = [
            'component_type',
            'component_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 %}

Upvotes: 3

Views: 4010

Answers (2)

arne
arne

Reputation: 225

Ok I solved the problem. When the user selects the PIPE option form the component_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 component_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 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 %}

Upvotes: 2

sgauri
sgauri

Reputation: 714

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();
})

Upvotes: 3

Related Questions