We are going to build a dynamic form with a list of checkboxes (Some Pre-Checked) dependent on the field before it.
I needed to build this for a real project I’m working on so I tried to come up with a more generic example to use to keep things simpler. Because the design of what I built is unique to my situation I will just cover what my goal was an hopefully you can take what’s useful for your project.
(Screenshot of models)
- Fuel Type
- Lab Test
Lab Test – Each Lab test will have a many to many relationship on the types of fuel the test can be performed on.
Package – Each package is just an array Lab Tests.
Sample – A sample of fuel when received in the Laboratory, needs to have a Fuel Type specified and list of Tests to be performed on it. When we select the samples fuel type, we will receive a list of tests (Checkboxes) that can be run on that fuel type. When we select a package, all tests within that package will get checked dynamically. The user will also have the ability to manually add more tests to the sample.
(Screenshot OR GIF of final form)
Our current database Items
5 Laboratory Tests:
- Water Content – Amount of water in fuel
- Alcohol Content – Amount of alcohol in fuel
- Ethanol Content – Amount of Ethanol in fuel
- Diesel Content – Amount of Diesel in fuel
- Quality Test – Tests quality of fuel
- Fuel Quality
- Fuel Purity
- Ethanol Only
Fuels Each test can be run on:
- Water Content – [Gas, Ethanol, Diesel]
- Alcohol Content – [Gas, Ethanol, Diesel]
- Ethanol Content – [Gas, Diesel]
- Diesel Content – [Gas, Ethanol]
- Quality Test- [Gas, Ethanol, Diesel]
Tests In Each Package:
- Fuel Quality – [Water Content , Alcohol Content , Ethanol Content , Diesel Content, Quality Test ]
- Fuel Purity – [Alcohol Content, Quality Test]
- Ethanol Only – [Water Content , Alcohol Content , Ethanol Content ]
Here we have a static form with form. It accomplishes what we need but opens up room for error because the use can select tests that cant be run on a certain fuel type and the user has to select the basic tests manually each time.
When a fuel type is selected we want fuels tests not available to be hidden.
When a package is selected we want all tests belonging in that package to be preselected.
- Basic Django
- Django Rest API
- Ajax Request
Lets make our form dynamic
So far we have a have a very basic Django project set up with the proper models and a form in out template. You cen download the code we have so far here (SOURCE CODE). Just be sure to run migrations and create the items we have listed so far.
1 – Exclude Tests from form and Build “Tests Section”
2 – Serialize Tests & Packages
First we want to create API call that returns a JSON list of Tests attached to a fuel type.
Lets create a Test Serializer:
Next we need a view to handle this request. The view will receive the Fuel Type ID in the url wich we will use to query all the LabTests.
For packages we will use the same serialize but will query the tests differently .
3 – Add Tests when Fuel is selected in form
We need to do two things to make this happen. First we need to create a addTests() function that handles the DOM manipulation. Next we need to create the on change event that handles the API call and activates our addTests function/
On change event
So far the form should render a list of check boxes when a fuel type is selected like so
4 – Check Fuels on Package Select
No we need to ensure that all tests within the package (On package select) are checked. For this we need another on change event for packages and a checkTests() function.