it-swarm.com.de

Behandlung mehrerer Eingabewerte für ein einzelnes HTML-Formular in Django

Ich habe ein HTML-Formular mit 3 Eingaben und Schritten.

  • 1st Der Schrittbenutzer muss den Vornamen eingeben und die Taste 1 drücken
  • 2nd Der Schrittbenutzer muss den Nachnamen eingeben und die Taste 2 drücken
  • 3rd Schritt Benutzer muss die E-Mail-Adresse eingeben und die letzte Taste drücken. 3

Jedes Mal, wenn der Benutzer eine beliebige Taste drückt, fahren Sie mit dem nächsten HTML-Schritt fort.

Ich möchte Eingaben in meinem views.py immer dann Schritt für Schritt behandeln, wenn der Benutzer eine beliebige Taste drückt und nicht alle zusammen in der endgültigen Übermittlung .

Ich habe diesen Code in views.py ausprobiert, um Eingaben in das Django-Backend zu übernehmen, aber ich bekomme nichts in views.py (wenn ich den Tastentyp von button in submit ändere, erhalte ich die Ergebnisse der Aktualisierungsseite und ich kann nicht zu Schritt 2) 

views.py

if request.method == 'POST' and 'first_step' in request.POST:
    print '1'
    firstname= request.POST.get('firstname')
if request.method == 'POST' and 'second_step' in request.POST:
    print '2'
    lastname= request.POST.get('lastname')
if request.method == 'POST' and 'final_step' in request.POST:
    print '3'
    email= request.POST.get('email')

Hier ist mein HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Form wizard with circular tabs</title>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <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">
                <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="email" name="firstname" 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 next-step">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="email" name="lastname" class="form-control" id="exampleInputEmail1" 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 next-step">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <div class="step33">


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



                        </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" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
                        </ul>
                    </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>
<script type="text/javascript">
$(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 nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
}


//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>
</body>
</html>
9
jessie jes

Vor ein paar Stunden habe ich eine Antwort auf dieses Problem geschrieben, dann habe ich diese gelöscht, weil ich feststellen musste, dass ich dieses Problem nur teilweise gelöst habe, da dieses Problem etwas komplizierter ist, als es zunächst aussieht.

Wie das OP schrieb: Wenn Sie eine Tasteneingabe type = "submit" verwenden, wird die Eingabe gesendet, aber gleichzeitig wird die Seite aktualisiert und mit diesem Formular Es ist nicht der Zweck. Und wenn Sie eine type = "button" - Eingabe verwenden, gelangen die Eingabedaten nicht zum Server (nur wenn Sie die übermittelten Daten in einem Javascript-Objekt sammeln und dann ein AJAX anrufen und mit dieser AJAX Anfrage an den Server senden).

Grundsätzlich ist es auch keine Django Frage, sondern eher eine Javascript/AJAX-Aufruffrage. Und ruft auch ein bisschen Sicherheitsfragen auf, die zu lösen sind. Denn mit den Einsendungen müsstest du auch irgendwie einen CSRF-Token an den Server senden. Also, es könnte gelöst werden, es würde einige Zeit dauern, bis jemand.

Eine gute Quelle zu diesem Thema ist hier:https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request- with-Django.html (diese Beschreibung ist jedoch teilweise nutzlos in diesem speziellen Fall)

SO FUNKTIONIERT DIESES IS

Vor langer Zeit Ich habe nicht mit Django und Python gearbeitet (heutzutage eher mit PHP und Joomla), aber ich habe nur ein Django 2.1.3 unter Python 3.7, um sicherzustellen, dass dies funktioniert (die folgenden Funktionen sollten auch in älteren Versionen funktionieren, mit nur geringen Änderungen, falls erforderlich)

Ich habe eine App namens 'myuserform' erstellt und zuerst ein Model in models.py erstellt

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

Dann habe ich ein Formular in forms.py erstellt (wichtig: erst ein Modell erstellen, dann ein ModelForm in Django, wenn Sie Formulare in Django erstellen - so sollten Sie diese Aufgaben richtig ausführen)

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']

Da das HTML-Formular hier oben bereits vom OP angegeben wurde, habe ich gerade zwei Vorlagen daraus im Vorlagen Ordner meiner App 'myuserform' erstellt. . A base.html und a regform.html (Ich habe mich jetzt nicht darum gekümmert, nette Vorlagen zu erstellen.)

  1. Ich musste die Eingabefelder (Namen) des HTML-Formulars umbenennen, um mit meinem Django Formular und Modell kompatibel zu sein (die Namen der Eingabefelder sollten mit den Formularfeldern Django und Modellfeldern identisch sein) Namen).

Ich habe auch die Eingabefelder ein wenig gelöscht, damit sie mit Javascript-Codes gut funktionieren, indem den Schaltflächen ein onclick Attribut hinzugefügt wurde, das verschiedene benutzerdefinierte Javascript-Funktionen zündet (dies könnte durch die Auswahl von jQuery-Elementen sehr vereinfacht werden) Na sicher). Der letzte Schaltfläche wird das Formular über AJAX senden. (Sie müssen die Eingabedaten nicht separat an Django senden oder sammeln, es ist meiner Meinung nach überflüssig - was willst du denn mit einem vornamen eingeben, der zum beispiel "joe" ist? Nichts). Sie können die Eingabedaten auch Schritt für Schritt mit Javascript vorvalidieren. Diese Funktionen habe ich ebenfalls hinzugefügt, sie können jedoch noch erweitert werden. Jetzt wird nur geprüft, ob das Feld leer ist oder nicht, und das E-Mail-Feld ist eine gültige Eingabe im E-Mail-Format oder nicht, und Sie werden nicht weitergeleitet, wenn dies nicht der Fall ist.

  1. Nun ist dies ein wichtiger Teil. Die templates sollten natürlich mit Django style-Tags erstellt werden, und benutzerdefinierte javascript Dateien sollten aus einem erstellten js-Ordner importiert werden . Ich kopiere hier nur die HTML-Templates von Django. Eine wichtige Sache ist, dass ich ein sicheres csrf-Token in das angegebene HTML-Formular eingefügt habe und im Skript-Teil des HTML-Codes ein paar hinzugefügte Javascript/JQuery-Codes geschrieben habe . Und der zweitwichtigste Teil ist die von mir geschriebene Javascript-Funktion function sendNuData (), die die Formulareingabedaten an die Django view mit using ein AJAX Aufruf.

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/[email protected]/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 %}

Dann ist einer der schwierigsten Teile Was ist die Frage von wie man mit AJAX Aufrufen von Daten umgeht/oder diese speichert gesendet an Django from a Form Submission (Das Formular wird also nicht über einen normalen Submit-Button (mit normaler HTTP-Anfrage) gesendet, was ein sehr bekannter, relativ einfacher Fall und eine relativ einfache Aufgabe wäre).

Es wird 2 Dinge geben Sie werden sich damit abfinden, wenn Sie HTML-Formulareingabedaten über einen AJAX -Aufruf an Django senden:

1. Die Anforderungsdaten werden im Format WSGI-Anforderungsobjekt vorliegen, andernfalls unveränderliches Querydict, was nicht möglich war Sie müssen nur normale Querydict-Methoden aufrufen.

2. Das neue Formularobjekt kann nicht aus normalen request.POST Daten gefüllt werden, da es leer ist (wenn der contentType wird auf false gesetzt, wie contentType: false im AJAX - Aufruf. Diese beiden Punkte sind in Django nicht sehr gut dokumentiert.

wenn contentType leer gelassen oder gesetzt ist auf:

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

Dann können Sie die Werte aller übergebenen Eingabefelder abrufen mit:

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

Aber hier habe ich nur das einfache request object verwendet, um das Formular auszufüllen in meiner views.py

Daher musste ich eine Ansicht erstellen, um die AJAX - Anforderung zu verarbeiten. es ist die Ansicht get_allform_data () (es könnte in vielerlei Hinsicht sein, ich habe nur eine Version gemacht). Am Ende ist es recht einfach, aber für einen normalen Django Entwickler ist es definitiv keine alltägliche Sache, daher ist es besser, über diese Dinge Bescheid zu wissen.

also die 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 })

Und die gleiche Ansicht in vereinfachter Form, wenn request.POST nicht leer ist:

@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 })

Und zum Schluss die urls.py Datei

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)
]

Das Ganze könnte noch verbessert und erweitert werden, aber zuallererst erledigt es jetzt die geforderte Arbeit.

Und die kurze Zusammenfassung: Sie können natürlich Schritt für Schritt Eingabefelddaten an Django senden (mit den gleichen Codes und kleinen Änderungen), aber in dieser speziellen Form ist dies absolut unnötig . Der Punkt der Aufgabe ist: wie man Formular-Tabs mit Javascript verschiebt, gleichzeitig Eingabedaten sammelt und wie man Formulardaten mit AJAX an Django sendet, um damit umzugehen/Formulareingabedaten in der Datenbank Django speichern. Gleichzeitig möchten wir keine Seitenaktualisierung.

Und dieser Screenshot zeigt das endgültige Formular visuell:

5
Zollie

Eine mögliche und nicht getestete Lösung wäre, die Attribute Ihres Modells auf Null zu setzen. Speichern Sie das zugehörige Attribut des Post-Objekts. Daher können Sie mit jeder if-Bedingung Attribute einzeln festlegen, ohne einen Null-/Leerzeichenfehler zu erhalten. Wenn Sie die Seite nicht mit jedem Klick aktualisieren möchten, können Sie AJAX verwenden. 

Mit jedem Klick setzen Sie variable=buttonId und if Bedingungen in view wie if variable == 0, und übergeben Sie jedes Mal den Zahlenwert der Schaltfläche als Argument an die Ansicht. Wenn Bedingungen wie view(request, buttonId), speichern Sie das zugehörige Attribut des Objekts und leiten Sie dann mit derselben Ansicht zum nächsten HTML`.

0
ibrahim konuk

In der Frage ist mir nicht ganz klar, was das gewünschte Verhalten ist. Wie jemand darauf hingewiesen hat, kann es eine Designfrage sein.

Durch "Behandlung der Eingaben in meinen Ansichten.py Schritt für Schritt" scheint es mir, dass die Daten für jeden Schritt gebucht und vom Backend verarbeitet werden sollen? (Ajax oder nicht)

Wenn für jeden Schritt ohne Ajax ein Post-Response-Zyklus gewünscht wird, müssen die vorherigen Schritte Teil des zurückgegebenen Kontexts/der Vorlage sein und es ist möglich, den Schritt im Backend "abzuwickeln".

Für diese Art von Situationen gibt es ein recht leistungsfähiges Werkzeug, den FormWizard in Django, der Ihnen möglicherweise Anregung für Ihre spezifische Lösung gibt.

0
Daniel Backman

Ich denke, ich sehe, wohin Sie versuchen, hier zu gehen, aber wie andere Benutzer bereits gesagt haben, ist dies weniger eine Django-Frage und eher eine Designfrage.

Grundsätzlich werden Sie IMMER eine Ziegelmauer treffen, wenn Sie versuchen, POST Informationen über einen Submit einem Server zu senden. Sie MÜSSEN AJAX verwenden, wenn Sie diese Funktionalität wünschen.

Abgesehen davon haben Sie zwei Möglichkeiten:

  1. Erstellen Sie eine Zustandslösung in Javascript, die die Formularinformationen durch die Schritte 1 und 2 verfolgt, und anschließend POST die Formulardaten nach Abschluss von Schritt 3.
  2. Erstellen Sie mit AJAX eine asynchrone Lösung, um Teildaten an Ihren Server zu senden (dazu muss der Ansichtscode aktualisiert werden, um Teildaten anstelle eines gesamten Django-Modells zu akzeptieren).

Hier können Sie lernen, wie Sie mit jQuery den Vorschlag Nr. 2 verwirklichen.

0
Julian