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

<!DOCTYPE html>
<html lang="en">
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>{% block title %}My amazing site homepage{% endblock %}</title>

</head>

<body>    

    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

in templates/regform.html

{% extends "base.html" %}

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

{% block content %}

<h1>{{title}}</h1><br>

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <section>
        <div class="wizard">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
                <ul class="nav nav-tabs" role="tablist">

                    <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-folder-open"></i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-pencil"></i>
                            </span>
                        </a>
                    </li>
                    <li role="presentation" class="disabled">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-picture"></i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>

            <form role="form" id="login-form" action="#" method="post">
                {% csrf_token %}
                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <div class="step1">
                            <div class="row">
                            <div class="col-md-6">
                                <label for="exampleInputEmail1">First Name</label>
                                <input type="text" name="first_name" class="form-control" id="exampleInputEmail1" placeholder="First Name">
                            </div>
                            </div>
                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" name="first_step" class="btn btn-primary" onclick="getFirstNameMove()">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <div class="step2">

                            <div class="step-22">
                                                <label for="exampleInputEmail1">Last Name</label>
                                <input type="text" name="last_name" class="form-control" id="exampleInputEmail2" placeholder="Last Name">
                            </div>
                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                            <li><button type="button" name="second_step" class="btn btn-primary" onclick="getLastNameMove()">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <div class="step3">
                          <div class="step-33">


                                                    <label for="exampleInputEmail1">email</label>
                                <input type="email" name="email" class="form-control" id="exampleInputEmail3" placeholder="email address">



                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                            <li><button type="button" name="final_step" id="final_step" class="btn btn-primary btn-info-full" onclick="getEmailMove()">Save and continue</button></li>
                        </ul>
                        </div>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="complete">
                        <div class="step44">
                            <h5>Completed</h5>


                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
  </div>
</div>

<script type="text/javascript">

$ = jQuery.noConflict();

$(document).ready(function () {
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".next-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
    $(".prev-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        prevTab($active);

    });
});

function getFirstNameMove() {
    if (checkFirstName()) {
        moveNextTab();
    }
}

function getLastNameMove() {
    if (checkLastName()) {
        moveNextTab();
    }
}

function getEmailMove() {
    if (checkEmail()) {
        moveNextTab();
        sendNuData();
    }
}

function checkFirstName() {
    form = document.getElementById('login-form');

    if (form.first_name.value == '') {
        alert('Cannot leave First name field blank.');
        form.first_name.focus();
        return false;
    }
    return true;
}

function checkLastName() {
    form = document.getElementById('login-form');

    if (form.last_name.value == '') {
        alert('Cannot leave Last name field blank.');
        form.last_name.focus();
        return false;
    }
    return true;
}

function checkEmail() {
    form = document.getElementById('login-form');
    let newEmail = form.email.value;

    if (newEmail == '') {
        alert('Cannot leave email field blank.');
        form.email.focus();
        return false;
    }

    if (emailValidate(newEmail)) {
        return true;
    } else {
        alert('Please provide a valid email address.');
        form.email.focus();
        return false;
    }

}

function emailValidate(sEmail) {
    let filter = /^([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/;
    return filter.test(sEmail);
}

function moveNextTab() {
    var $active = $('.wizard .nav-tabs li.active');
        $active.next().removeClass('disabled');
            nextTab($active);
}

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
}

function sendNuData(){

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                // Only send the token to relative URLs i.e. locally.
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        }
    });

    $.ajax({
        url: '/get_allform_data/',
        method: 'post',
        data: $('form').serialize(),
        contentType: false,            
        success: function (data) {
            alert('Form Submitted');
            // console.log(data);
        },
        error: function(data) {
            alert('Form submission failed');
            // console.log(data);
        }
    });
}

//according menu

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({});

    //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});
</script>

{% 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:

Answer 2

A possible and untested solution would be making your model's attributes nullable/blank. Shown below save the post object's related attribute. Hence you can set attributes one by one with every if condition without getting any null/blank error. Also if you don't want to refresh the page with every click, you can use AJAX.

With every click set variable=buttonId and if conditions in view like if variable == 0 and also every time pass button's number value as an argument to the view for if conditions like view(request, buttonId), save the object's related attribute, then redirect to the next HTML` with the same view.

Answer 3

I think I see where you're trying to go here, but as other users have already said, this is less of a Django question and more of a design question.

Basically you are ALWAYS going to hit a brick wall when attempting to POST information to a server through a submit. You NEED to use AJAX if you want this functionality.

That aside, you have two real options:

1. Build a state solution in javascript that will track the form information through steps 1 and 2, then POST the form data on the completion of step 3.
2. Build an async solution using AJAX to post partial data to your server (this will require updating the view code to accept partial data instead of an entire Django model).

Here is a place where you can learn how to use jQuery to accomplish suggestion number 2.

Answer 4

It's not fully clear to me in the question what the desired behaviour is. As someone pointed out, it may be a design question.

By "handle inputs in my views.py step by step" it looks to me that the data is desired to posted for every step and handled by backend? (ajax or not)

If it is desired to have a post-response cycle for every step without ajax, the previous steps needs to be part of the returned context/template and it's possible to "handle" the step in the backend.

There exists a quite powerful tool for this type of situations, the FormWizard in django and that may give you some inspiration for your specific solution?