it-swarm.com.ru

Обработка нескольких входных значений для одной HTML-формы в django

У меня есть HTML-форма с 3 кнопками ввода и шагов.

  • 1st Шаговый пользователь должен ввести имя и нажать кнопку 1
  • 2й Шаговый пользователь должен ввести фамилию и нажать кнопку 2
  • 3й Шаговый пользователь должен поставить электронную почту и нажать кнопку финала 3

Каждый раз, когда пользователь нажимает любую кнопку, затем переходите к следующему шагу HTML.

Я хочу обрабатывать вводы в моем views.py шаг за шагом в любое время, когда пользователь нажимает любую кнопку, и не все вместе в окончательном представлении.

Я попробовал этот код в views.py, чтобы получить входные данные в Django бэкэнде, но я ничего не получаю в views.py (если я изменяю тип кнопки с button на submit, тогда я получаю страницу обновления ореха результатов и не могу перейти к шагу 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')

Вот мой HTML-код:

<!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

Несколько часов назад я написал ответ на эту проблему, а затем удалил его, потому что мне пришлось понять, что я только частично дал решение этой проблемы, поскольку эта проблема немного сложнее, чем кажется на первый взгляд.

Как пишет ОП: если вы используете тип = "отправить" кнопку ввода, то ввод будет отправлен, но в то же время страница обновится и с этой формой это не цель. И если вы используете вход type = "button" , то входные данные не попадут на сервер (только если вы соберете отправленные данные в Объект javascript, а затем зажечь вызов AJAX и отправить его на сервер с этим запросом AJAX).

По сути, это также не вопрос Django, а скорее вопрос о вызовах javascript/AJAX. А также вызывает немного вопросов безопасности для решения. Так как с представлениями вам также нужно как-то отправить токен CSRF на сервер. Таким образом, это может быть решено, это займет некоторое время для всех.

Хороший источник по этому вопросу находится здесь: https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to -work-with-ajax-request-with-Django.html (однако эта статья в некоторой части бесполезна в данном конкретном случае)

ТАК ЭТО IS КАК ЭТО РАБОТАЕТ

Давным-давно я не работал с Django и Python (в настоящее время больше похож на PHP и Joomla ) но я только что поднял Django 2.1.3 на Python 3.7 только для того, чтобы убедиться, что это работает (следующие вещи должны работать и в более старых версиях, с очень небольшими изменениями при необходимости)

Я создал приложение под названием "myuserform" и сначала создал Model в 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

Затем я создал форму в forms.py (важно: сначала создайте Model, затем ModelForm в Django, если вы создаете формы в Django - именно так вы должны правильно выполнять эти задания)

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

Поскольку HTML-форма уже была предоставлена ​​OP здесь выше, я просто создал два шаблона из них в Папка шаблонов моего приложения 'myuserform'. A base.html и regform.html (меня это не касается о создании хороших шаблонов сейчас)

  1. Мне пришлось переименовать поля ввода (имя) формы HTML, чтобы они были совместимы с моими Django формой и моделью (имена полей ввода должны совпадать с полями Django формы "и полями модели имена).

Я также немного очистил поля ввода, чтобы они хорошо работали с кодами javascript, добавив к кнопкам атрибут onclick , который запускает различные пользовательские функции javascript (это может быть очень упрощен с выбором элементов jQuery, конечно). последняя кнопка будет отправлять форму через AJAX. (вы не делаете Я должен отправлять или собирать входные данные по отдельности в Django, это, по моему мнению, излишне - поскольку, что вы хотите делать с входными данными по имени, например, "Джо" ? Ничего). Вы также можете предварительно проверять входные данные шаг за шагом с помощью javascript - я тоже добавил эти функции, однако эти функции предварительной проверки могли бы быть расширены. Теперь он только проверяет, является ли поле пустым или нет, и поле электронной почты является допустимым вводом формата электронной почты или нет, и не позволяет вам продолжить, если это не так).

  1. Теперь это важная часть. Разумеется, шаблоны должны быть созданы с помощью тегов стиля Django и специального javascript файлы должны быть импортированы из созданной папки js . Я просто копирую здесь шаблоны HTML из Django. Важно отметить, что я поместил безопасный токен csrf в данную HTML-форму и я написал несколько добавленных javascript/jquery-код в части сценария HTML. И вторая самая важная часть - это написанная мной функция javascript, называемая функцией sendNuData () , которая отправляет Сформируйте входные данные в представление Django с использованием AJAX вызов.

в шаблонах/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>

в шаблонах/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 %}

Тогда одна из самых сложных частей - это вопрос , как обрабатывать/или сохранять AJAX данные о вызовах , отправленные Django из отправки формы (поэтому форма не отправляется с помощью обычной кнопка отправки (с обычным HTTP-запросом), которая была бы очень известным, относительно простым делом и задачей для обработки).

Будет 2 вещи , с которыми вы столкнетесь при отправке и отправке входных данных html-формы через AJAX вызов Django:

1. Данные запроса будут находиться в объект запроса WSGI , в противном случае неизменный формат Querydict , который нельзя обработать, просто вызвав для них обычные методы Querydict.

2. Новый объект формы нельзя заполнить обычным request.POST данные, поскольку они будут пустыми (если для contentType установлено значение false, например contentType: false , в вызове AJAX). Эти два момента не очень хорошо документированы в Django.

если contentType оставлен пустым или имеет значение:

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

Затем вы можете получить значения всех представленных полей ввода с помощью:

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

Но здесь я просто использовал простой объект запроса , чтобы заполнить форму в мои views.py

Поэтому мне пришлось создать представление для обработки запроса AJAX. это get_allform_data () (это может быть во многих отношениях, я только что сделал одну версию). В конце концов, все довольно просто, но для обычного Django разработчика это определенно не обычное дело, так что лучше знать об этом.

поэтому 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 })

И то же самое представление в упрощенном виде, если request.POST не пусто:

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

И, наконец, файл urls.py

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

Все это может быть улучшено и расширено намного больше, но в первую очередь это делает необходимую работу сейчас.

И краткое резюме: вы, конечно, можете пошагово отправлять данные поля ввода в Django (используя те же коды с небольшими изменениями), но в этой конкретной форме это абсолютно не нужно. Суть задачи: как перемещать вкладки формы с помощью Javascript, одновременно как собирать входные данные и как отправлять данные формы с помощью AJAX в Django для обработки/сохранения входных данных формы в базу данных Django. И в то же время мы не хотим обновления страницы.

И этот скриншот визуально показывает окончательную форму:

5
Zollie

Возможным и непроверенным решением было бы сделать атрибуты вашей модели обнуляемыми/пустыми. Показанный ниже сохраните связанный атрибут объекта записи. Следовательно, вы можете устанавливать атрибуты один за другим с каждым условием if, не получая никакой пустой или пустой ошибки Также, если вы не хотите обновлять страницу при каждом нажатии, вы можете использовать AJAX.

При каждом щелчке мышью задайте условия variable=buttonId и if в view, например if variable == 0, а также каждый раз указывайте номер кнопки в качестве аргумента для представления, если условия, такие как view(request, buttonId), сохраняют связанный атрибут объекта, а затем перенаправляют на следующий HTML` с таким же видом.

0
ibrahim konuk

Мне не совсем понятно в вопросе, что такое желаемое поведение. Как кто-то указал, это может быть вопрос дизайна.

"Шаг за шагом обрабатывая входные данные в моем views.py", мне кажется, что данные необходимо публиковать для каждого шага и обрабатывать бэкэндом? (Аякс или нет)

Если желательно иметь цикл пост-ответа для каждого шага без ajax, предыдущие шаги должны быть частью возвращенного контекста/шаблона, и возможно "обработать" шаг в бэкэнде.

Существует довольно мощный инструмент для ситуаций такого типа, FormWizard in Django, и это может дать вам вдохновение для вашего конкретного решения?

0
Daniel Backman

Я думаю, что вижу, куда вы пытаетесь пойти, но, как уже сказали другие пользователи, это не вопрос Django, а скорее вопрос дизайна.

По сути, вы ВСЕГДА собираетесь попасть в кирпичную стену при попытке POST передать информацию на сервер через отправку. Вам нужно использовать AJAX, если вы хотите эту функцию.

Кроме того, у вас есть два реальных варианта:

  1. Создайте решение состояния в javascript, который будет отслеживать информацию о форме с помощью шагов 1 и 2, а затем POST данные формы после завершения шага 3.
  2. Создайте асинхронное решение, используя AJAX для отправки частичных данных на ваш сервер (для этого потребуется обновить код представления для принятия частичных данных вместо всей модели Django).

Здесь вы можете узнать, как использовать jQuery для выполнения предложения № 2.

0
Julian