0

私はこれまで主に Python を使ってきたので、JavaScript に関しては初心者です。今、フォームを実装するには後者が必要です。いくつかのアイデアと要件を念頭に置いています。開始方法と使用するフレームワークまたはツールを教えてください.

私の要件は次のとおりです。

  1. サーバー側のロジックは Python と Django で実装されます。
  2. フォーム全体が 1 つの Web ページにあります。
  3. Web ページの全体的なデザインはTwitter Bootstrapで行う必要があります。
  4. ページが読み込まれると、フォームの最初のフィールドのみが表示されます。
  5. このフィールドが入力され、正しく検証されたら、フォームの 2 番目のフィールドを最初のフィールドの下に表示します
  6. 新しいフィールドが表示されると、その Web ページは必要に応じて自動的に下にスクロールし、新しいフィールドがブラウザの中央に配置されるようにします。スクロールは、素敵なアニメーションで発生するはずです。
  7. 私のフォームには、タイプChoiceFieldのいくつかのフィールドも含まれています。各選択肢には、フォーム フィールドとしても実装される独自の追加設定のセットがあります。特定の選択が行われると、それぞれの設定セットのみが表示されますが、すべての選択フィールドのすべての設定が同時に表示されるわけではありません。（単純な構造でこれを行うことはできますif-elseか？）
  8. すべてのフィールドが表示、入力、検証され、フォームが送信されると、サーバーはいくつかの計算を行います。これらの計算の結果は、準備ができたら、フォーム全体の下に表示する必要があります。Web ページは再び結果まで自動的に下にスクロールするはずです。最善の方法は、フォームが表示されなくなり、結果のみが表示される程度まで Web ページを下にスクロールすることです。したがって、これはおそらく現在開いているブラウザ ウィンドウのサイズに依存します。

私はこれらすべてが可能であることを知っており、そのようなフォームも時々見てきましたが、現時点では具体的な例はありません. また、これらすべてが JavaScript で可能であることも知っています。上記のすべてを JQuery で実装できますか、それとも追加のツールが必要ですか? JavaScript の専門家が、私の頭の中のこの混乱を少しでもガイドしてくれたら最高です。前もって感謝します！

4

2 に答える 2

3

それを機能させる

javascriptで何かをする前に、機能する通常のフォームを作成してください。つまり、必要なサーバー側言語を使用してフォームを生成します。フォームを送信すると、必要な処理が実行されます。javascriptなしで機能するフォームがある場合は、jsが壊れても常に機能するという自信があります。

それをより良く機能させる/プログレッシブエンハンスメント

jsには2つまたは3つの要件があるようです-それらをすべて個別に扱います：

1.フォームには、一度に1つの入力のみを表示する必要があります

たとえば、次のようなマークアップを使用します。

<form id="myForm" method="post">
    <legend>My Awesome Form</legend>
    <div class="question">
        <label for="x">X</label>
        <input name="x" id="x">
    </div>
    <div class="question">
        <label for="y">Y</label>
        <input name="y" id="y">
    </div>
    <div class="question">
        <label for="z">Z</label>
        <input name="z" id="z">
    </div>

    <div class="submit"><input type="submit" value="Submit"></div>
</form>

このようないくつかのjsを使用してください：

$('.question', '#myForm').not(':first-child').hide();
$('input', '#myForm').change() {
    var div, next;

    div  = $(this).parent();
    next = div.next();

    if ($(this).val() && next.length) {
        parent.hide();
        next.show();
    }
});

これは、一度に1つの質問divのみを表示し、入力が入力されると次のdiv（次の質問がある場合）を表示します。

2.ユーザー入力を検証します

ユーザー入力を検証するには、それを行う関数を作成し、必要に応じてtrue / falseを返し、入力値が無効と見なされた場合に続行されないように、それをjsにフックします。

validate(field, input) {
    var valid = false;

    // implement your logic here to validate input

    if (valid) {
        return true
    }
    return false;
}

$('input', '#myForm').change() {
    var div, next;

    if (!validate($('this').attr('name'), $(this).val()) {
        return;
    }

    div  = $(this).parent();
    next = div.next();

    if ($(this).val() && next.length) {
        parent.hide();
        next.show();
    }
});

これにより、現在の入力に無効な値がある場合、ユーザーは次の入力に移動できなくなります。

3.ajaxでフォームを送信する

[送信]をクリックすると、通常のフォームの送信と（ほぼ）同じ方法でフォームデータがサーバーに送信されます。唯一の違いは、解析するjson応答、またはページの最後にダンプするhtmlのスニペットのいずれかで応答することです。

$('#myForm').submit(function(e) {
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data, textStatus, jqXHR) {
            // handle success response
        },
        error: function(jqXHR, textStatus, errorThrown)) {
            // show the user an error
        }
    });
});

ここに書かれているjsはすべてテストされていません。やりたいことの各側面に取り組む方法について、いくつかのアイデアが得られるはずです。もちろん、特定の方法の詳細については、ドキュメントを参照してください。

于 2012-11-09T17:39:17.453 に答える
2

これらはすべて jQuery で実行できるため、追加の JS ツールは必要ありません。

構築する機能がたくさんあるので、詳細には触れません。ただし、プロセスの各ステップの進め方については、ある程度の洞察を提供できます。

1.) 結構です。

2.) それも問題ありません。これを行うには 1 つの HTML ページが必要です。

3.) すべてのフォームを HTML で作成し、CSS を display none にすることをお勧めします。次に、ユーザーが処理を進めるにつれて、.show()を使用して非表示の要素を「表示」できます。

4.) おそらく、フォームの外にある種の「次へ」ボタンが必要になるでしょう。.click()を使用して、入力フォーム フィールドの値に対して必要なフォーム検証を実行する関数をトリガーします。.next()を使用して、フォーム入力を循環させることができます。

5.) ブラウザのスクロールが必要な場合は、scrollTopまたは jQuery ScrollTo プラグインを使用します。画面上で物事を動かしたいだけで、実際にスクロールしたくない場合は、.animate()を使用してください。

6.) ユーザーが進行するにつれて、オンザフライで値を設定する必要があります。したがって、検出を行うには.change()を使用します。

7.) 送信する前に、すべてのフィールドでバリデーターを再度実行して、すべてのデータが正しいことを確認します。.ajax()を使用してサービスにリクエストを送信し、実際のフォーム送信時のデフォルトを防止する必要があります。サービスから返された応答を取得し、それに応じて情報をフォーマットします。

これにより、プロジェクトを達成する方法についての洞察が得られるはずです。幸運を！

于 2012-11-09T17:27:08.010 に答える