In Django, Form submissions
What are Django Form sets and why do we need them?

Rather than quoting the django documentation i will just give you my personal explanation along with an example.

Definition: Formsets allow you to create an object such as a customer along with the customers related child objects which may be something like customer products all in one form. There is no limitation to the amount so in the same form in which we create the customer we can also add multiple products wich will contain the customer as an instance without any extra work in the view.

Why I’m avoiding formsets

Personally i dont belive the way I’m going to build out my form is any better, in fact it has its draw downs, but i do like the idea of being able to build a complex piece such as this manually to get a better understanding of the whole picture an it allows me to customize wherever i want.

What we are going to build

Starting with a new django project i am goin to build a form that creates us a customer and allows us to add products to the customer in the same form before the customer is officially created.

GitHub link: link

Prerequisites

  • Basic Django knowlege
  • Basic Javascript
  • Jquery
  • Ajax
Basic Setup

Models.py

forms.py

views.py

Our template

So far you  should have an understanding of whats going on and i would recommend building out the same.

Adding Products and processing the form

From here on the only to files we will add to is the view and the template

Template

There are two main things we need to happen in the template.

  1. Add on a new product from each time we click “Add Product”
  2. Submit form via ajax – This can be done another way but i didnt like the way django reloads the page after submission.

First lets grab our product form and put it into a JavaScript variable.

Then we need to add an event handler that adds a new form field inside our main on click

At this point test your code by clicking on the “Add Product” text. This should append a new field on each click

Finally lets build out ajax submission:

Handling form data in view

Since we are not handling a traditional form submission i will grab each element manually along with handling the object creation via the create() method. We can grab the customers name with the tradational dictianalry selected “request.POST[‘name’]” but we will need the getlist() method to grab each product.

finally we loop though all the products in our list and create a new product for each by adding the product name and customer instance.

Update Form

So how do we handle the update piece of this? This is where formsets have a leg up on my method. I have not figure out an efficient way yet so we will create an update version of the customer but handle add ons and edits of each product manually.

Lets our update page, then loop though and display all the customers products in a table. we will make our “Add Product”¬† button in the next step;

Here is what we should have so far:

We created an “Update customer” template and updated the “”Products” div. It will be empty until we click the “Add product” button.

Then we loop though our list of products that will will pass in through our view (In the next step)

Here is our update view so far:

So far this is what our template looks like when we pass in a customer id in the URL.

No all we need to do is write in our JavaScript to handle the add button, send the form and complete the view.

We added this JavaScript at the bottom of our update template:

Our view will handle the post request almost exactly as the previous one expect form the customer will be handle via the built in form with an instance:

That completes our tutorial.

Source code can be found here: link

Contact Us

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