web-dev-qa-db-fra.com

Gestion de plusieurs valeurs d'entrée pour un formulaire HTML unique dans Django

J'ai un formulaire HTML avec 3 entrées et des boutons d'étapes.

  • 1st step user doit mettre son prénom et appuyer sur le bouton 1
  • 2dakota du Nord l'étape utilisateur doit mettre le nom de famille et appuyer sur le bouton 2
  • 3rd Étape utilisateur doit mettre l'email et appuyer sur le bouton final 3

Chaque fois que l'utilisateur appuie sur un bouton, passez à l'étape HTML suivante.

Je veux gérer les entrées de mon views.py pas à pas chaque fois que l'utilisateur appuie sur un bouton, et pas tous ensemble dans la soumission finale .

J'ai essayé ce code dans views.py pour prendre des entrées dans le backend Django mais je ne reçois rien dans views.py (si je change le type de bouton de button à submit, la page d'actualisation des écrous des résultats s'affiche et je ne peux pas aller à l'étape 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')

Voici mon code 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>
javascriptpythonhtmldjangodjango-views
9
jessie jes

Une solution possible et non testée serait de rendre les attributs de votre modèle nuls/vides. Ci-dessous, enregistrez l'attribut associé de l'objet post. Par conséquent, vous pouvez définir les attributs un par un avec chaque condition if sans obtenir d'erreur null/blank. De plus, si vous ne souhaitez pas actualiser la page à chaque clic, vous pouvez utiliser AJAX. 

Avec chaque clic, définissez les conditions variable=buttonId et if dans view comme if variable == 0 et également la valeur numérique de chaque bouton de passage comme argument de la vue pour les conditions if telles que view(request, buttonId), enregistrez l'attribut associé de l'objet, puis redirigez-le vers le code HTML suivant avec le même affichage.

0
ibrahim konuk

Pour moi, la question du comportement souhaité n’est pas tout à fait claire. Comme quelqu'un l'a souligné, il peut s'agir d'une question de conception.

Par "gérer les entrées dans mes vues. Étape par étape", il me semble que les données doivent être postées pour chaque étape et traitées par le backend? (ajax ou pas)

Si vous souhaitez avoir un cycle de post-réponse pour chaque étape sans ajax, les étapes précédentes doivent faire partie du contexte/modèle renvoyé et il est possible de "gérer" l'étape dans le backend.

Il existe un outil assez puissant pour ce type de situation, le FormWizard dans Django et qui peut vous inspirer pour votre solution spécifique?

0
Daniel Backman

Je pense que je vois où vous essayez d'aller ici, mais comme d'autres utilisateurs l'ont déjà dit, il s'agit moins d'une question Django que d'une question de conception.

En gros, vous allez TOUJOURS frapper un mur de briques lorsque vous tentez de POST informations sur un serveur via une soumission. Vous devez utiliser AJAX si vous voulez cette fonctionnalité.

Cela dit, vous avez deux options réelles:

  1. Construisez une solution d'état en javascript qui permettra de suivre les informations du formulaire aux étapes 1 et 2, puis POST les données du formulaire à l'issue de l'étape 3.
  2. Construisez une solution asynchrone en utilisant AJAX pour poster des données partielles sur votre serveur (il faudra mettre à jour le code d'affichage pour accepter les données partielles au lieu d'un modèle Django complet).

Voici un endroit où vous pouvez apprendre à utiliser jQuery pour réaliser la suggestion numéro 2.

0
Julian