In Uncategorized

Introduction

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.

Our Project

(Screenshot of models)

Models (Database)

  • Fuel Type
  • Lab Test
  • Package
  • Sample

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

3 fuels:

  1. Gas
  2. Diesel
  3. Ethanol

5 Laboratory Tests:

  1. Water Content – Amount of water in fuel
  2. Alcohol Content – Amount of alcohol in fuel
  3. Ethanol Content – Amount of Ethanol in fuel
  4. Diesel Content – Amount of Diesel in fuel
  5. Quality Test – Tests quality of fuel

3 Packages:

  1. Fuel Quality
  2. Fuel Purity
  3. Ethanol Only

 

Fuels Each test can be run on:

  1. Water Content – [Gas, Ethanol, Diesel]
  2. Alcohol Content – [Gas, Ethanol, Diesel]
  3. Ethanol Content – [Gas, Diesel]
  4. Diesel Content – [Gas, Ethanol]
  5. Quality Test- [Gas, Ethanol, Diesel]

Tests In Each Package:

  1. Fuel Quality – [Water Content , Alcohol Content , Ethanol Content , Diesel Content, Quality Test ]
  2. Fuel Purity – [Alcohol Content, Quality Test]
  3. Ethanol Only – [Water Content , Alcohol Content , Ethanol Content ]

Static Form

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.

Dynamic Form

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.

Prerequisites 

  • Basic Django
  • Django Rest API
  • JavaScript Jquery
  • 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/

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.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.