[FIXED] how to hide some field based on the forms.select django

Issue

i want to hide some fiel when the user will select an option, but when i'm trying to do so, it does not work, i don't know if i forget something in my code or if i make a mistake but i've tried many things and it does not work in my model i have a choices with "IN" and "Out" so what i want is when OUT is selected some field of my forms to be hidden, else to show the whole form. here is my model.py

CHOICES = (
("1", "IN"),
("2", "OUT")
)

class addReport(models.Model):
  heure = models.TimeField(auto_now_add=True)
  mouve = models.CharField(max_length=12, choices = CHOICES)
  nom_Visiteur = models.CharField(max_length=26)
  fonction = models.CharField(max_length=26)
  service = models.CharField(max_length=26)
  motif = models.CharField(max_length=26)
  phoneNumber = models.CharField(max_length=12, unique= True)

here is my forms.py

from django import forms
from .models import addReport
from django.forms import ModelForm
class PostForms(forms.ModelForm):
    class Meta:
    model = addReport
    fields = ('mouve','nom_Visiteur','fonction','service','motif','phoneNumber')


    widgets = {
        'mouve': forms.Select(attrs={'class': 'form-control'}),
        'nom_Visiteur': forms.TextInput(attrs={'class': 'form-control'}),
        'fonction': forms.TextInput(attrs={'class': 'form-control'}),
        'service': forms.TextInput(attrs={'class': 'form-control'}),
        'motif': forms.Textarea(attrs={'class': 'form-control'}),
        'phoneNumber': forms.TextInput(attrs={'class': 'form-control'}),
    }

    def __init__(self, data=None, *args, **kwargs):

        super().__init__(data, *args, **kwargs)

    # If 'later' is chosen, mark send_dt as required.
        if data and data.get('mouve', None) == self.OUT:
            self.fields['fonction'] = forms.HiddenInput(),
            self.fields['service'] = forms.HiddenInput(),
            

here is my views.py

from django.shortcuts import render
from django.views.generic import TemplateView, ListView
from .models import addReport
from .forms import PostForms
from django.views.generic.edit import CreateView
from django.contrib import messages #import messages
from django.contrib.messages.views import SuccessMessageMixin



class CreateProduct(CreateView, SuccessMessageMixin):
    model = addReport
    template_name = 'home.html'
    form_class = PostForms
    success_url = "."
    success_message = "Votre raport a ete enregistrer"

    def dispatch(self, request, *args, **kwargs):
        self.request = request
        return super().dispatch(request, *args, **kwargs)

    def form_valid(self, form):
        obj = form.save(commit=False)
        obj.save()
        return super().form_valid(form)

and here is my home.html

 <div class="h-100 ml-5 mr-5 mb-5 align-items-center justify-content-center mt-5" style="width: 30;">
        {% if messages %}
            {% for message in messages %}
                <div class="text-center alert alert-{{ message.tags}}">
                    {{ message|safe }}
                </div>
            {% endfor %}
        {% endif %}
        <div class="p-3 mb-2 bg-light text-black rounded">
            <form method="post" action=" ">
                {% csrf_token %}
                    {{ form|crispy }}

                <br>
                <div>
                    <button class="btn btn-success" type="submit">
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
   
</div>

I want the fonction, service fields to be hidden when Out is selected. Thank you

Solution

It's probably easiest to do this using javascript. There are various ways of doing this. Here's a simple example. This simply hides and disables some form elements based on the value of some other form element. If you use something like this, you must change the querySelector values to something appropriate for your actual form elements.

(function() {
  var mouveSelect = document.querySelector('select[name=mouve]')

  function hideFormElementsIfMouveIsOUT() {
    var shouldHide = mouveSelect.value === 'OUT'
    document.querySelectorAll('[name=fonction], [name=service]')
      .forEach(function(element) {
        element.style.display = shouldHide ? 'none' : null
        element.disabled = shouldHide
        // this logging statement is just for showing what the example does
        console.log((shouldHide ? 'hide' : 'show'), 'element', element)
      })
  }
  mouveSelect.addEventListener('change', hideFormElementsIfMouveIsOUT)
  hideFormElementsIfMouveIsOUT()
})()

<form>
  <select name=mouve>
    <option>IN</option>
    <option>OUT</option>
  </select>
  <select name=fonction>
    <option>A</option>
    <option>B</option>
  </select>
  <input name=service placeholder=service />
  <input name=somethingElse placeholder='something else' />
</form>

Answered By - Håken Lid