javascript - フォームの各入力を 1 つずつ表示しますか?

Question

私はjqueryを使用しており、各フォームのテキスト入力を1つずつ表示し、ユーザーがデータを入力してから次のテキストを表示したいと考えています。単一の質問セグメントでフォーム全体を完成させた後、フォーム全体の回答を送信してもらいたいです。

これは可能ですか？または、目的の結果を得るには、フォーム全体を表示する必要がありますか?

前もって感謝します。

Answer 1

うわー、誰もが私より速いです、まあ、私はポットに手を投げます:

この jsFiddleは、私が思いついた実装を示しています。次のコンテナーを取得するためにフォームを基本的にトラバースし、Enter キー (13) が押されたときにそれを表示する方法を示しています。

stopPropagation / preventDefault を忘れないでください。そうしないと、Enter キーを押したときにフォームが送信されてしまいます。

item が $(this).parents("form").submit(); を呼び出す最後の要素である場合の例外を追加できます。次の要素を見つけて表示しようとする代わりに。

Answer 2

新しい入力をトリガーするアンカー付き

$(document).on('click','a.more-inputs',function(){
    $lastInput = $(this).prev('input[type="text"]'); //anchor should be next element of present input otherwise use a different selector input.one-more:last-child or so
    if($lastInput.val() && $lastInput){
        $(this).before($lastInput.clone().val(''));//anchor should be where last comment says or else use different code
        }
    else{
        $lastInput.focus();
        }
    return false;
    });

満たされた入力のぼかしイベントで新しい入力をトリガーします

$(document).on('blur','input[type="text"].one-more',function(){
    $lastInput = $(this);
    if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
    else{
        $lastInput.focus(); //fill this before getting next one
        }
    return false;
    });

現在の入力でEnterキーを押すと、新しい入力がトリガーされます

$(document).on('keypress','input[type="text"].one-more',function(e){
    if(e.keyCode == 13){
     $lastInput = $(this);
      if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
     else{
        $lastInput.focus(); //fill this before getting next one
        }
    }
    return false;
    });

Answer 3

各フォーム要素を div でラップして、フォーム全体をレンダリングできます。

<form>
  <div class="control-wrap">
    <label for="a">Field label</label>
    <input type="text" name="a">
  </div>
  <div class="control-wrap">
    <label for="b">Second Field label</label>
    <input type="text" name="b">
  </div>
  ...
</form>

最初のラッパーを除くすべてのラッパーを非表示にし、ユーザーが各要素をぼかすと、次のラッパーを表示しますが、(1) 次のフォーム要素がまだ非表示であり、(2) ユーザーがフィールドに何かを入力した場合に限ります。

$('.control-wrap').hide().eq(0).show();
$('input').on('blur',function(e){
  var input = $(this);
    if(input.val().length > 0) {
      input.parents('.control-wrap').next('.control-wrap:hidden').show().find('input').focus();
    }            
});

これは非常に単純化されており、そのままのテキスト フィールドに対してのみ機能しますが、出発点として機能することを願っています。

Answer 4

これを試してください

            $(document).ready(function(){
                $('input:text').keypress(function(e){

                    var code = (e.keyCode ? e.keyCode : e.which);
                     if(code == 13) { //Enter keycode
                       $(this).next().show();
                       $(this).hide();
                     }
                });

            });

Answer 5

このようなものから始めることができます。

Answer 6

すべての入力をフォームに入れ、ユーザーが 1 つの操作を完了したら、単純に非表示にして表示することをお勧めします。

$("#next").click(function() {        
    $("input").hide();
    $("input").eq(++currentIndex).show();
});