Handling multiple input values for single html form in django

Question

I have a html form with 3 inputs and steps buttons.

• 1^st step user must put first name and press button 1
• 2^nd step user must put l

Answer 1

Few hours ago I wrote an answer to this problem, then I deleted that, because I had to realize that I only partially gave solutions to this problem, since this problem is a bit more complicated than it first looks like.

As the OP wrote: if you use a type="submit" button input, the input will be submitted, but at the same time the page will refresh and with this Form it's not the purpose. And if you use a type="button" input, then the input data will not get to the server (only if you collect the submitted data into a javascript Object and then ignite an AJAX call and send it to the server with that AJAX request).

It's basically also not a Django question, but more like a javascript/AJAX call question. And also invokes a bit of a security questions to solve. Since with the submissions you would also have to send a CSRF token somehow to the server. So, it could be solved, it would take some time to anybody.

A good source about this subject is here: https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html (however, this write-up is in some part, useless in this particular case)

SO THIS IS HOW IT WORKS

A long time ago I have not worked with Django and Python (nowadays more like with PHP and Joomla) but I just pulled up a Django 2.1.3 on Python 3.7 just to make sure this is working (the followings should work in older versions too, with very little modifications if needed)

I created an app called 'myuserform' and first created a Model in models.py

models.py

from django.db import models
from django.utils import timezone

class NewUser(models.Model):
    first_name = models.CharField(max_length=150)
    last_name = models.CharField(max_length=150)
    email = models.EmailField(max_length=254)
    creation_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.first_name, self.last_name

Then I created a Form in forms.py (important: please create a Model first, then a ModelForm in Django if you create Forms in Django - that is the way how you should do these jobs right)

forms.py

from django import forms
from django.forms import ModelForm
from myuserform.models import NewUser

# Create the form class.
class NewUserForm(ModelForm):
    class Meta:
        model = NewUser
        fields = ['first_name', 'last_name', 'email']

Since, the HTML Form was already given by the OP here above, then I just created two templates from them in the templates folder of my app 'myuserform'. A base.html and a regform.html (I was not concerned about creating nice templates now)

1. I had to rename the input fields(name) of the HTML form to be compatible with my Django Form and Model(the input fields' names should be the same as the Django Form fields' and Model fields' names).

I also cleared a bit the input fields to make them work well with javascript codes with adding an onclick attribute to the buttons which ignites different custom javascript functions (this could be very much simplified with jQuery element selections of course). The last button will submit the form via AJAX. (you do not have to send or collect the input data separately to Django, it's redundant according to me - since what do you want to do with a firstname input data which is for example "Joe" ? Nothing). You can also pre-validate the input data step by step with javascript - I added those functions too, however these pre-validate functions could be extended more. Now, it only checks whether the field is empty or not, and the email field is a valid email format input or not and it does not let you further if it is not).

2. Now this is an important part. The templates of course should be created with Django style tags, and custom javascript files should be imported from a created js folder. I just copy here the HTML templates from Django. One important thing is that I placed a secure csrf token into the given HTML form and I wrote few added javascript/jquery code in the script part of the HTML. And the second most important part is the javascript function I wrote, called function sendNuData(), which is sending the Form input data to the Django view with using an AJAX call.

in templates/base.html

    

    

    
    

    
    

    
    

    
    

    



    

    

        {% block content %}{% endblock %}
    

in templates/regform.html

{% extends "base.html" %}

{% block title %}My amazing Registration Form{% endblock %}

{% block content %}

{{title}}




    

      

        

        

            

                

                


                    

                        
                            
                                
                            
                        
                    

                    

                        
                            
                                
                            
                        
                    
                    

                        
                            
                                
                            
                        
                    

                    

                        
                            
                                
                            
                        
                    
                
            

            

                {% csrf_token %}
                

                    

                        

                            

                            

                                First Name
                                
                            
                            
                        
                        

                            
Save and continue
                        
                    
                    

                        


                            

                                                Last Name
                                
                            
                        
                        

                            
Previous
                            
Save and continue
                        
                    
                    

                        

                          



                                                    email
                                



                        
                        

                            
Previous
                            
Save and continue
                        
                        
                    
                    

                        

                            
Completed


                        
                    
                    

                
            
        
    
   
  




{% endblock %}

Then one of the hardest part, which is the question of how to handle/or save AJAX calls data sent to Django from a Form submission (so the Form is not submitted via a normal submit button (with normal HTTP request), which would be a very well known, relatively easy case and task to handle).

There will be 2 things you will find yourself up against when you submit and send html form input data via an AJAX call to Django:

1. The request data is going to be in WSGI Request object, otherwise, immutable Querydict format, which could not be handled by just calling normal Querydict methods on them.

2. The new Form object cannot be populated from usual request.POST data, since it will be empty (if the contentType set to false, like contentType: false, in the AJAX call). These two points are not very well documented in Django.

if the contentType is left empty or is set to:

contentType: "application/x-www-form-urlencoded",

Then you can get the values of all the submitted input fields with:

first_name = request.POST.get('first_name')
last_name = request.POST.get('last_name') # and so on...

But here I just used the plain request object to populate the Form in my views.py

Thus I had to create a view to handle the AJAX request. it is the get_allform_data() view (it could be in many ways, I just made one version). It's quite simple at the end, but it's definitely not an everyday thing for a normal Django developer, so it's better to know about these.

so the views.py

from django.template import Template, Context
from django.template.loader import get_template
from django.shortcuts import render
from django.http import HttpResponseRedirect, HttpResponse, HttpRequest
from django.urls import reverse
from .forms import NewUserForm
from .models import NewUser
from django.forms import Select, ModelForm
import datetime
from django.views.decorators.csrf import csrf_protect
from django.http import QueryDict
import json
import copy

def index(request):
    return HttpResponse("Hello, world. You're at the myuserform index.")

@csrf_protect
def regform(request):
    title = "This is the Registration Form Page"
    return render(request, 'regform.html', {'title': title})

@csrf_protect
def get_allform_data(request):

    # you can check if request is ajax
    # and you could handle other calls differently
    # if request.is_ajax() - do this and do that...

    # we create an empty Querydict to copy the request into it
    # to be able to handle/modify input request data sent by AJAX
    datam = QueryDict()

    # we should copy the request to work with it if needed
    for i in request:
        datam = copy.copy(i)        

    # the AJAX sent request is better in normal dictionary format
    post_dict = QueryDict(datam).dict()    

    # if this is a POST request we need to process the form data
    if request.method == 'POST':

        # create a form instance and populate it with data from the request:
        # however with using AJAX request.POST is empty - so we use the request Querydict
        # to populate the Form
        form = NewUserForm(post_dict)            

        # check whether it's valid:
        if form.is_valid():
            # you can do whatever with cleaned form data
            data = form.cleaned_data

            # we can now save the form input data to the database
            form.save()

            # print("form is now saved")
            # return HttpResponse("I got the data and saved it")
        else:
            print(form.errors)

    else:
        form = NewUserForm() # this not really needed here, only if we handle the whole in 1 view
        # return HttpResponse("I cannot handle the request yet, since it was not sent yet")
        return HttpResponseRedirect(reverse('regform'))

    return render(request, 'regform.html', {'form' : form })

And the same view in simplified form if the request.POST is not empty:

@csrf_protect
def get_allform_data(request):

    # if this is a POST request we need to process the form data
    if request.method == 'POST':

        # create a form instance and populate it with data from the request:        
        form = NewUserForm(request.POST)

        # check whether it's valid:
        if form.is_valid():
            # you can still do whatever with the cleaned data here
            data = form.cleaned_data

            # and you just save the form (inputs) to the database
            form.save()

        else:
            print(form.errors)

    else:
        form = NewUserForm() # this not really needed here, only if we handle the whole in 1 view
        # return HttpResponse("I cannot handle the request yet, since it was not sent yet")
        return HttpResponseRedirect(reverse('regform'))

    return render(request, 'regform.html', {'form' : form })

And finally the urls.py file

from django.contrib import admin
from django.urls import include, path
from myuserform import views as myuserform_views

urlpatterns = [
    path('', myuserform_views.index),
    path('regform/', myuserform_views.regform, name='regform'),
    path('admin/', admin.site.urls),
    path('get_allform_data/', myuserform_views.get_allform_data)
]

The whole thing could be improved and extended much more but first and foremost it does the required job now.

And the short summary: you can of course send input field data step by step to Django (using the same codes with little modifications), but at this particular Form it is absolutely unnecessary. The point of the task is: how to move Form tabs with Javascript, at the same time how to collect input data, and how to send Form data using AJAX to Django to handle/save Form input data to Django database. And at the same time we do not want page refresh.

And this screenshot shows the final Form visually: