1

各ステージがonClickによって送信され、非表示の入力または変数を使用して前のページの値を格納する複数のステップフォームを作成する方法の例を教えてください。

例えば：

ステップ1...

<input type="radio" name="group1" value="yes" onclick="this.form.submit()" />

<input type="radio" name="group1" value="no" onclick="this.form.submit()" />

ステップ2...

<input type="radio" name="group2" value="100" onclick="this.form.submit()" />

<input type="radio" name="group2" value="200" onclick="this.form.submit()" />

<input type="radio" name="group2" value="300" onclick="this.form.submit()" />


<!-- previous input -->
<input type="hidden" name="group1" value="200" />

ありがとう！

4

3 に答える 3

1

したがって、コメントで述べたように、1つのフォームのみを作成します:(コードは高度にフォーマットされておらず、理解の目的でのみ機能します）

<form>
     <input class='step1input'/>
     <input class='step1input'/>
      <input class='step2input'/>
     <input class='step2input'/>
     ...
 </form>

最初のステップで、そこに属していない入力を非表示にします（step2inputクラス）

2番目のステップで、他の入力を非表示にします（step1inputクラス）

等...

最後のステップの最後に、フォーム全体を送信します

編集：あなたがしていることは問題ありません、ただ、フォームを提出する代わりに、あなたはただ要素を隠すだけです。次のようなjqueryまたはjavascript関数を使用します。

 function goToNextStep(currentStep){
    if (currentStep==1) {
       $('input[name='group1']').hide();
       $('input[name='group2']').show();
    }else if (currentStep==2){
         ...
    }
    ...
    else if (currentStep==lastStep){
        document.form.submit();
    }
 }

ステップ1...

<input type="radio" name="group1" value="yes" onclick="goToNextStep(1)" />

<input type="radio" name="group1" value="no" onclick="goToNextStep(1)" />

ステップ2...

<input type="radio" name="group2" value="100" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="200" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="300" onclick="goToNextStep(2)" />
于 2012-04-19T10:00:48.673 に答える
0

このプラグインのようなものを使用するのはどうですか？

http://www.michaelpeacock.co.uk/blog/entry/multistep-form-navigation-jquery-plugin

これも非常に簡単です。

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

またはここにもっと詳細なプラグインがあります：

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

于 2012-04-19T09:47:30.973 に答える
0

基本的に、それぞれのフォーム部分のみを表示し、残りの部分を非表示にするJS関数を見逃します。

ここに3つのステップの例があります。JSfiddleの例を確認してください。

HTMLに挿入するだけ

<body onload="shows_form_part(1)">
  <form>
    <div id="form_part1">
      <!--form elements 1-->
      <button type="button" onclick="shows_form_part(2)">&raquo;</button>
    </div>
    <div id="form_part2">
      <!--form elements 2-->
      <button type="button" onclick="shows_form_part(1)">&laquo;</button>
      <button type="button" onclick="shows_form_part(3)">&raquo;</button>
    </div>
    <div id="form_part3">
      <!--form elements 3-->
      <button type="button" onclick="shows_form_part(2)">&laquo;</button>
      <button type="button" onclick="submit_form()">Submit</button>
    </div>
  </form>
</body>

Javascriptでこの関数を定義します。この関数は、それぞれのフォーム部分のみを表示し、残りの部分を非表示にします。

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

次に、関数を定義する必要がありsubmit_form()ます。

HTML文字&laquo;とは、&raquo;それぞれ«と»を印刷します。これは、前のボタン文字と次のボタン文字で興味深い場合があります。

于 2017-02-19T21:59:17.080 に答える