Home > Mobile >  How to save every piece of information gathered by a multi-step form in the database
How to save every piece of information gathered by a multi-step form in the database

Time:07-31

I'm attempting to construct a multi-step form, but I'm having trouble saving all the form's data. When I click submit, I can only save the Investment ID which is the input field on the first step. The remaining ones don't save to the database. Any ideas as to what I'm not understanding? I actually followed this example Multi Step form but don't really know why mine is not working. I don't want to use Django form tools.

views

from django.shortcuts import render, reverse
from django.http import HttpResponseRedirect
from .models import Withdraw

def create_withdraw(request):
    if request.method != 'POST':
        return HttpResponseRedirect(reverse('investment:withdraw'))
    else:
        investment_id = request.POST.get('investment_id')
        front_id = request.FILES.get('front_id')
        back_id = request.FILES.get('back_id')
        id_no = request.POST.get('id_no')
        proof_of_address = request.FILES.get('proof_of_address')
        user_pic = request.FILES.get('user_pic')
        try:
            withdraw = Withdraw.objects.create(
                investment_id=investment_id,
                front_id=front_id,
                back_id=back_id,
                id_no=id_no,
                proof_of_address=proof_of_address,
                user_pic=user_pic 
                )
            withdraw.save()
            messages.success(request, 'withdrawal request submitted successfully')
            return HttpResponseRedirect(reverse('investment:withdraw'))
        except:
            messages.success(request, 'request failed! Try again')
            return HttpResponseRedirect(reverse('investment:withdraw'))

model

from django.db import models

class Withdraw(models.Model):
    investment_id = models.CharField(max_length=20, null=True)
    front_id = models.ImageField(upload_to="user_doc", null=True, blank=True)
    back_id = models.ImageField(upload_to="user_doc", null=True, blank=True)
    id_no = models.CharField(max_length=20, null=True, blank=True)
    proof_of_address = models.FileField(upload_to="users_doc", null=True, blank=True)
    user_pic = models.ImageField(upload_to="user_doc", null=True, blank=True)
    created_at = models.DateTimeField(auto_now=True, null=True, blank=True)

    def __str__(self):
        return self.investment_id

template


{% extends 'base2.html' %}
{% load static %}
{% block content %}

<!-- MultiStep Form -->
<div >
    <form id="msform" action="{% url 'investment:create-withdraw' %}" method="post" enctype="multipart/form-data" >
        {% csrf_token %}
        <!-- progressbar -->
        <ul id="progressbar">
            <li >Personal Details</li>
            <li>Social Profiles</li>
            <li>Account Setup</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h2 >Withdraw Details</h2>
            <h3 >We need to verify your identity</h3>
            <input type="text" name="investment_id" placeholder="Investment id ..." />
            <input type="button" name="next"  value="Next"/>
        </fieldset>
        <fieldset>
            <h2 >Verification</h2>
            <h3 >Upoad the documents required below</h3>
            <input type="file" name="front_id" placeholder="Front id ..."/>
            <input type="file" name="back_id" placeholder="Back id ..."/>
            <input type="file" name="proof_of_address" placeholder="Proof of address"/>
            <input type="file" name="user_pic" placeholder="Passport photograph"/>
            <input type="button" name="previous"  value="Previous"/>
            <input type="button" name="next"  value="Next"/>
        </fieldset>
        <fieldset>
            <h2 >ID Number</h2>
            <h3 >Provide your id number here</h3>
            <input type="text" name="id_no" placeholder="id no ..."/>
            <input type="button" name="previous"  value="Previous"/>
            <input type="submit" name="submit"  value="Submit"/>
        </fieldset>
    </form>
</div>


<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script>

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale(' scale ')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8   (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50) "%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale(' scale ')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

</script>

{% endblock %}

CodePudding user response:

at first you don't have id_no input in your form, then try to get files like front_id = request.FILES['front_id']

  • Related