I Want To Save The Data In My Database Depending On The Catgory Of Data Chosen by User Like I Have 4 Lisitings Like APparetements, Food And Life, Car And Travelling if User Selects Appartements Then Area, location Fields Are Showed An getiing Data And Saved Data Else Hidden and Disabled For Other Fields Like Food And Life, Car And Travellig. MY COde Of MyListing.html
{% extends 'home.html' %}
{% load static %}
{% block content %}
<div class="page-heading">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="top-text header-text">
<h6>Add Plots In Your Listing</h6>
<h2>If You Want To Buy The Plot Then Add It In Your Listing</h2>
</div>
</div>
</div>
</div>
</div>
<div class="contact-page">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="inner-content">
<div class="row">
<div class="col-lg-6 align-self-center">
<form id="contact" action="" method="POST" enctype="multipart/form-data">
<div class="row">
{% csrf_token %}
<div class="col-lg-12">
<label for="">Listing Type</label>
{{ form.listing_type }}
<label for="" >Area</label>
{{ form.area }}
<label for="">Location</label>
{{ form.location }}
<label for="">Price</label>
{{ form.price }}
<label for="">Title</label>
{{ form.title }}
<label for="">Upload An Image</label>
{{ form.image }}
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button "><i class="fa fa-paper-plane"></i>Add Your Listing!</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var categorySelect = $('#id_listing_type'); // Corrected selector
var areaField = $('#id_area');
var locationField = $('#id_location'); // Define locationField
areaField.prop('disabled', true); // Disable the field initially
locationField.prop('disabled', true);
categorySelect.on('change', function() {
var selectedCategory = $(this).val();
if (selectedCategory === 'appartements') {
areaField.prop('disabled', false); // Enable the field
locationField.prop('disabled', false);
} else {
areaField.prop('disabled', true); // Disable the field
locationField.prop('disabled', true);
}
});
});
</script>
{% endblock content %}
class My_listings(FormView):
template_name = 'Mylisting.html'
form_class = Mylisting_form
success_url = '/contact/'
def form_valid(self, form):
form.save()
return super().form_valid(form)```