0

3ページの登録ページがあります。ユーザーが最初のページでオプションを選択して [送信] をクリックすると、フォームは jquery の animate メソッドを使用して次のフォームに変換されます。つまり、フォームは同じページにとどまります。私が持っている質問は、2 番目のフォームの内容がその情報に依存しているため、最初のフォームからデータを取得する方法です。これが私のhtmlです：

<div id="Registration" style="display:none;">
        <div class="box">
            <form id="frmtype1" action="#" name="frmtype1" method="post">
                <header>Registration Options</header><br/>
                 <label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>

                 <label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>

                 <label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
                 <p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
            </form>

            <form name="everything" id="everything" action="#" method="post">
                <header>Registration Information</header><br/>
                <label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
                Last Name*: <input type="text" name="lname" id="lname" /> <br/>
                Address*: <input type="text" name="address" id="address" /> <br/>
        </form>
        </div>
    </div>

したがって、オプションを選択すると、最初のフォームが消えて次のフォームが表示されます。では、彼らが選択したオプションのデータを取得するにはどうすればよいでしょうか? ありがとう

4

2 に答える 2

1

それらは1つのフォームの情報に依存しているため、「ページ」は実際には同じフォームである必要があります。jQuery / JavaScriptを使用して、「現在のページ」を表示/非表示にします。これにより、すべてのデータを一度に送信できます。

  1. すべての入力要素を1つのhtmlフォームタグにラップします
  2. フォームの「セグメント」ごとに、jsを使用してラッピングHTMLコンテナを非表示/表示する必要があります。デフォルトはフォームの「ページ1」で、残りは非表示になっています。
  3. 送信ボタンをボタンだけに変更し、クリックイベントを設定します。ユーザーがボタンをクリックすると、入力が検証され、jQueryが「ページ2」を再表示します。
  4. 最後の「ページ」に通常の送信ボタンがあり、すべてのフォームデータが1つに投稿されます。

たとえば、htmlは次のようになります。

<script type="text/javascript">
  $(document).ready(function{

    $(".next-page").click(function(){
      $(".box-wrapper").hide();
      $("#page-" + $(this).data("page")).show();
    });

  });
</script>

<div class="registration">
  <form name="regform" action="" method="post">
    <!-- Page 1 -->
    <div class="box-wrapper" id="page-1">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
      </div>
    </div>
    <!-- Page 2 -->
    <div class="box-wrapper" id="page-2" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
      </div>
    </div>
    <!-- Page 3 -->
    <div class="box-wrapper" id="page-3" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="submit" name="submit" class="submit" value="Complete Registration"/>
      </div>
    </div>
  </form>
</div>
于 2012-09-23T21:26:06.087 に答える
0

jquery を使用する$('input[name=Reg_type]:checked').val()と、選択した値が得られます。

于 2012-09-23T20:51:42.953 に答える