How to hide Django form fields using JavaScript, Jquery etc

Question

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

sgauri · Accepted Answer · 2018-03-29 12:58:33Z

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

answered Mar 29, 2018 at 12:58

sgauri

7148 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arne · Accepted Answer · 2018-04-02 12:45:46Z

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

Collectives™ on Stack Overflow

How to hide Django form fields using JavaScript, Jquery etc

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related