Django form action

What is Django form action?

Django form action is the process, which is initiated on submission of form. In simple words we can say that every form is designed to perform some specific task. These tasks might be registrations, logins etc. Every form performs some sort of actions when be click on submit button, Or submit form in another way such as AJAX(Asynchronous JavaScript and XML) etc. Basically form action is how a form is acting on submission.

In our previous tutorial we have discussed a lot about forms. If you want to see or download Django form tutorial you can visit the link below:

Django Forms

What we will do next?

  1. Adding Bootstrap into Django forms.
  2. In our today’s tutorial, we will discuss about form action.
  3. We will continue to work on our previous form, which output like below:
Django Forms
Django Forms

Apply bootstrap on Django forms

Above is very basic form. To style this form, we need to apply bootstrap on it. To do so install bootstrap and add it to project settings:

Install Bootstrap

I have already installed bootstrap in my environment. That is why below command returns “Requirement already satisfied”.

Django form action
Django form action

Add bootstrap to project settings

project folder > project folder > settings.py

Django form action
Django form action

Add bootstrap to Django form template

project folder > template folder > form.html

<!DOCTYPE html>
{% load bootstrap4 %}
{% load staticfiles %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MyForm</title>
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.css "%}">
  </head>
  <body>
    <div class="container bg-secondary">
      <div class="row">
        <div class="col-md-6 mx-auto bg-light">
          <h1>Django Form</h1>
          <form method="post">
            {% csrf_token %}
            {% bootstrap_form uform %}
            <input type="submit" value="Submit" class='btn btn-success'>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Output

Django form action
Django form action

Django form action

Till now, we have discussed a lot about creating django forms. Now we will discuss how to add functionality to this form. So now first we need to detect if there is post method or not. Here is the code for the same:

project folder > project folder > views.py

from django.shortcuts import render
from myapp.forms import MyForm
from django.http import HttpResponse

def index(request):
    return render(request,'index.html')

def userForm(request):
    form = MyForm()
    if request.method == "POST":
        form = MyForm(request.POST)
        if form.is_valid():
            name = form.cleaned_data['name']
            e = form.cleaned_data['email']
            c = form.cleaned_data['Contact']
            return render(request,'form.html',{'n':name,'e':e,'c':c})
    return render(request,'form.html',{'uform':MyForm})

Explanation

  • You can see in form above i have checked if there an Http method i.e. POST.
  • If button clicked, i.e. form submitted then it will check for validations.
  • If the form data is valid, then we can get form data using cleaned_data.
  • In the form above, i have return HttpResponse which returns the form data.

project folder > template folder > form.html

<!DOCTYPE html>
{% load bootstrap4 %}
{% load staticfiles %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MyForm</title>
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.css "%}">
  </head>
  <body>
    <div class="container bg-secondary">
      <div class="row">
        <div class="col-md-6 mx-auto bg-light">
          {% if n %}
            <div class="container p-5">
              <h1 class='alert alert-success '>Welcome {{ n }} </h1>
              <h2 class 'alert alert-info'> Here is your Details:</h2>
              <h3 class='alert-warning'>Email: {{e}} <br/> Contact: {{c}}</h3>
            </div>
          {% else %}
            <h1>Django Form</h1>
            <form method="post">
              {% csrf_token %}
              {% bootstrap_form uform %}
              <input type="submit" value="Submit" class='btn btn-success'>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </body>
</html>

Explanation

  • In the code above, i have done a little bit logic here.
  • The view returns same page for both before and after clicking on submit button.
  • When user clicks on submit button, request.method == ‘POST’ becomes true.
  • It returns user data and pass it back through context dictionary to the Html page.

Output: Before form submission

Django form action
Django form action

Output: After form submission

Django form action
Django form action

Download source code

Download project on Github
Download project on Github 

So, it is all about adding action to django forms. You can also add multiple buttons into forms. And you can identify those buttons using name. I hope you guys enjoyed the post. Thanks!!!

3 thoughts on “Django form action

Leave a Reply

Your email address will not be published. Required fields are marked *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.