web-dev-qa-db-ja.com

djangoで単一のHTMLフォームの複数の入力値を処理する

3つの入力とステップボタンを備えたhtmlフォームがあります。

  • 1st ステップのユーザーは名を入力してボタン1を押す必要があります
  • 2nd ステップのユーザーは姓を入力してボタン2を押す必要があります
  • ３rd ステップのユーザーはメールを入れて最後のボタン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>
javascriptpythonhtmldjangodjango-views
9
jessie jes

テストされていない可能性のあるソリューションは、モデルの属性をnull可能/空白にすることです。以下に示すように、postオブジェクトの関連属性を保存します。したがって、null /空白エラーが発生することなく、if条件ごとに属性を1つずつ設定できます。また、クリックするたびにページを更新したくない場合は、AJAXを使用できます。

クリックするたびに、variable=buttonIdのようにif variable == 0とifのview条件を設定し、view(request, buttonId)のようなif条件のビューの引数としてボタンの数値を渡すたびに、オブジェクトの関連属性、次に同じビューで次のHTML`にリダイレクトします。

0
ibrahim konuk

望ましい振る舞いが何であるかという質問では、私には完全に明確ではありません。誰かが指摘したように、それはデザインの問題かもしれません。

「views.pyの入力をステップごとに処理する」ことにより、データはすべてのステップでポストされ、バックエンドによって処理されることが望まれるように見えますか？ （ajaxかどうか）

Ajaxを使用せずにすべてのステップで応答後サイクルが必要な場合は、前のステップを返されたコンテキスト/テン​​プレートの一部にする必要があり、バックエンドでステップを「処理」することができます。

このタイプの状況には非常に強力なツールが存在します FormWizard in Djangoそしてそれはあなたの特定のソリューションにいくつかのインスピレーションを与えるかもしれませんか？

0
Daniel Backman

私はあなたがここに行こうとしているところを見ていると思いますが、他のユーザーがすでに言ったように、これはDjangoの質問ではなく、デザインの質問です。

基本的に、送信を介してサーバーにPOST情報を送信しようとすると、常にレンガの壁にぶつかることになります。この機能が必要な場合は、AJAXを使用する必要があります。 。

それはさておき、あなたは2つの本当の選択肢があります：

  1. 手順1と2を通じてフォーム情報を追跡するJavaScriptで状態ソリューションを構築し、次にPOST手順3の完了時にフォームデータを取得します。
  2. AJAX=を使用して非同期ソリューションを構築し、部分的なデータをサーバーに投稿します（Djangoモデル全体ではなく、部分的なデータを受け入れるようにビューコードを更新する必要があります） 。

ここに、jQueryを使用して提案番号2を達成する方法を学ぶことができる場所があります。

0
Julian