Django Templates/ChoiceField Display Fields based on Selection

Question

I am currently making a template in Django that renders some forms. I have multiple profile models that hold specific data based on what type of user the user is. For example I have a Corporate profile that holds a company name and a Customer profile that holds a personal phone number. I have a ChoiceField that I am using to determine which type of user is filling out the form and based on what the user selects I display a set of specific fields. When the user makes a selection I'm using JQuery to make the specific hidden fields visible.

The problem I am running into is that some of the fields that do not get displayed are required for the other model. So lets say the company name is required for the Corporate profile and the personal phone number is required for the Customer profile. If the user selects Corporate as their type my template returns errors for the personal phone number field and does not submit. Is there a way with Django, JQuery, or something else to disable or remove or ignore the unnecessary fields based on the user selection?

Here is how I am currently hiding the info:

<script type="text/javascript">
$(document).ready(function() {
$("#id_user_type").change(function(){
    $(".user-type-wrapper").slideUp('500');
    $("#user-type-"+$(this).val()).slideDown('500');
});});
</script>

This script is affecting this portion of my template:

 ...
 <div class="field">
     {{ form.user_type.errors }}
     <label for="id_user_type">User Type:</label>
     {{ form.user_type }}
 </div>

 <!-- Company Specific Form Content -->
 <div class="user-type-wrapper" id="user-type-CO" style="display: none;">
      <div class="field">
          {{ form.company_name.errors }}
          <label for="id_company_name">Company Name:</label>
          {{ form.company_name }}
      </div>
 </div>
 <!-- End Company Specific Form Content -->

 <!-- Customer Specific Form Content -->
 <div class="user-type-wrapper" id="user-type-CU">
      <div class="field">
          {{ form.phone_number.errors }}
          <label for="id_phone_number">Phone Number:</label>
          {{ form.phone_number }}
      </div>
 </div>
 <!-- End Customer Specific Form Content -->
 ...

Any help would be greatly appreciated!

Answer 1

Implementation

After some searching I was able to come up with a solution. I added Dajax to my implementation to reload the page with the required fields based on what type of user the user selected. This enabled me to eliminate the fields that didn't need to be completed and still perform validation on the ones that did.

Further Reading

To help anyone else that's having a similar problem I would recommend checking out the Dajax Project, especially the Pagination Example. I ran into some issues by just following the tutorial but if you visit the Dajax Github Repo you should be able to get through it.

Issues To Watch For

If you are using JQuery UI insure that you load the JQuery version of Dajax and not the Prototype version. Loading Prototype will result in the JQuery not functioning on the pages that you load the Dajax links in. For reference see the import code located at https://github.com/jorgebastida/django-dajax/issues/37.

If you are using JQuery make sure to include the following in your header:

<script src="https://github.com/cowboy/jquery-misc/blob/master/jquery.ba-serializeobject.js" type="text/javascript" charset="utf-8"></script>

This is listed in the documentation if you search for it but is easy to overlook

Answer 2

Make different modelforms for each type of profile. Get all your forms in the template. Finally, use jquery to decide which one should be seen.