Django. How to hide unnecessary fields in the form depending on the selected category?

Hi all. I need to make it so that when adding a new ad by selecting the category, hiding unnecessary fields in the form. Understand that this is done through JS, but I'm not good, so please suggest if anyone is well versed.
For example, I want when "Houses and lands" disappeared "Floor":
5cc6b7c5a1850755852236.png
Here is my main model:
class Listing(models.Model):
 realtor = models.ForeignKey(Realtor, on_delete=models.CASCADE, verbose_name='Realtor')
 category = models.ForeignKey(Category, on_delete=models.CASCADE, verbose_name='Category')
 region = models.ForeignKey(Region, on_delete=models.CASCADE, verbose_name='Area')
 city = models.ForeignKey(City, on_delete=models.CASCADE, verbose_name='City')
 district = models.ForeignKey(District, on_delete=models.CASCADE, verbose_name='District')
 title = models.CharField(max_length=200, verbose_name='Title')
 landmark = models.CharField(blank=True, max_length=200, verbose_name='Benchmark')
 description = models.TextField(blank=True, verbose_name='Description')
 stage = models.IntegerField(default=0, blank=True, verbose_name='Floor')
 rooms = models.IntegerField(default=0, blank=True, verbose_name='Number of rooms')

forms.py:
class ListingForm(forms.ModelForm):
 class Meta:
 model = Listing
 exclude = ('realtor',)

Form in template:
<form method="POST" novalidate enctype="multipart/form-data">
 {% csrf_token %}
 {% bootstrap_form form %}
 <input type="submit" value="Add" class="btn btn-secondary btn-block">
</form>

I looked in the browser the structure of a form in a template:
<div class="form-group">
<label for="id_category">Category</label>
<select name="category" class="form-control" title="" required id="id_category">
 <option value="" selected>---------</option>
 <option value="1">Apartment</option>
 <option value="2">Commercial</option>
 <option value="3">Homes and land</option>
</select></div>

The structure of the field that I want to hide:
<div class="form-group">
<label for="id_stage">Floor</label>
<input type="number" name="stage" value="0" 
class="form-control" placeholder="Floor" title="" id="id_stage">
</div>

I tried to do so, but not working yet:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
the <script>
 $('#id_category').change(function () {
 var optionSelected = $("option:selected", this);
 var valueSelected = $(this).val();

 if (valueSelected === 3){
$('#id_rooms').hide();
 } else {
$('#id_rooms').show();
}
});
 </script>

If you know, tell me, please, or an example of what how it's done. In advance, thank you.
March 19th 20 at 08:32
3 answers
March 19th 20 at 08:34
Though I am a novice, but I have a feeling that it is necessary to dig towards the client part, namely JS. Look at specresurs any event called by form (see at the same javascript.ru) in it to make a call to Dom'e have to hide the item. If that is possible somewhere in the JS topic to throw a question, say like filling in a drop down menu to hide some other element. Something like that.
March 19th 20 at 08:36
As long as you did similar, but for forms of address. Took the idea from PayPal
https://www.ushanka.com/ here on this site, add the product to cart and go into the cart itself, then "Pay with card". But this site was critical only for USA, so all the countries I have configured the default form, and USA specific.
Is such a GET request to the view which the input accepts a category parameter (preferably a string parameter slug), then in the view happens import the desired Form of forms.py your application, in the absence of a specific class and category, using the exception of import DefaultCategoryForm, in the same way pull up the template, you can use select_template(). Further, this piece forms render and paste it into your HTML.
But you also need to consider what validation you need to substitute the desired shape. To collect her best on the fly using type().

In another project more simple, I used betterforms. There is need to create groups of forms, and the class attribute, for example slug to hang those categories of fields you want to display for a specific category. But this option is suitable for not required fields. That is, everywhere to use it will not work
March 19th 20 at 08:38
Variants two: on the front and on the Beck.
On the front should carptet. Buck can make a view in which if you change will akitsa form completely or to reload the page pererastayut form and return it back.

Find more questions by tags DjangoJavaScript