CODEWITHSUNDEEP
djangolabelfieldhide
John Doe
John Doe

Reputation: 35

Hiding Django form fields using Jquery but it is not hiding form labels (using crispy forms)

I am trying to hide certain fields in a form based on select field choices. For example for Select field "system_description_1" If option "Direct" is selected following fields should be hidden (also hidden by default on page load), but when "Indirect" is selected the fields should become visible. This function is absolutely working fine using Jquery, but it is still showing the form label, It is hiding the field but not the label of the field how do I hide them ? I want to hide the field label when I hide the field, but show the field label when I unhide or show them.

Fields: secondary_circulation_pump_model secondary_circulation_pump_capacity

models.py:

class Systemprofile(models.Model):
    SYSTEMDESC1 = (
        ('direct', 'Direct'),
        ('indirect', 'Indirect')
     )
    SECONDARYPUMPMODEL = (
        ('grundfos', 'Grundfos'),
        ('cnp', 'CNP'),
    ('others', 'Others')
    )
    SECONDARYPUMPCAPACITY = (
        ('ltr-hr', 'Ltr/hr'),
        ('others', 'Others')
     )
  name = models.CharField(max_length=255, null=True)
  system_description_1 = models.CharField(blank=True, max_length=255, null=True, choices=SYSTEMDESC1)
  secondary_circulation_pump_model = models.CharField(blank=True, max_length=255, null=True, choices=SECONDARYPUMPMODEL)
  secondary_circulation_pump_capacity = models.CharField(blank=True, max_length=255, null=True, choices=SECONDARYPUMPCAPACITY)

forms.py

class CreateSystemprofile(ModelForm):
class Meta:
    model = Systemprofile
    fields = '__all__'

system_profile.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
{% load crispy_forms_tags %}
<script>
function Hide() {

    if(document.getElementById('id_system_description_1').options[document.getElementById('id_system_description_1').selectedIndex].value == "Direct") {
        document.getElementById('id_secondary_circulation_pump_model').style.display = 'none';
        document.getElementById('id_secondary_circulation_pump_capacity').style.display = 'none';
        
    } else {
        document.getElementById('id_secondary_circulation_pump_model').style.display = '';
        document.getElementById('id_secondary_circulation_pump_capacity').style.display = '';
        
    }
}

window.onload = function() {
    document.getElementById('id_secondary_circulation_pump_model').style.display = 'none';
    document.getElementById('id_secondary_circulation_pump_capacity').style.display = 'none';
    document.getElementById('id_system_description_1').onchange = Hide;
};
</script>
    <br>
<div class="row">
    <div class="col-md-6">
        <div class="card card-body">
            <p><b>Add/Update System Profile:</b></p>
            <form action="" method="POST">
                <table border="1">
                {% csrf_token %}
                     <table>
                        <div class="form-group">
                         System Description 1: <select id="id_system_description_1" onchange="Hide()">
                            <option value="">select</option>
                            <option value="Direct">Direct</option>
                            <option value="Indirect">Indirect</option>
                        </select></div></table>
                     
                    <table>
                         {{ form.name|as_crispy_field }}
                         {{ form.secondary_circulation_pump_model|as_crispy_field }}
                         {{ form.secondary_circulation_pump_capacity|as_crispy_field }}
                         </table>
                        <hr>
                <input class="btn btn-sm btn-info" type="submit" name="submit">
            </form>

        </div>
    </div>

</div>

{% endblock %}

Now see the output, If I show the field it is absolutely fine, that is when I select "Indirect" option, but when I select "Direct" option it displays the field label, please see the image below:

WHEN I HIDE:

When I Hide

WHEN I SHOW:

When I Show

PLEASE HELP ME WITH JQUERY OR CSS OR ANY OTHER WAY TO RESOLVE THIS.

Upvotes: 0

Views: 198

Answers (1)

ilyasbbu
ilyasbbu

Reputation: 1749

This is the jQuery method for selecting with label:

$('label[for="id_secondary_circulation_pump_model"]').css('display', 'none');
$('label[for="id_secondary_circulation_pump_capacity"]').css('display', 'none');

Upvotes: 1

Related Questions