javascript - 次のページを含むマルチページでJavaScriptフォームウィザードを作成し、キャンセルして最後のページに戻って送信するにはどうすればよいですか？

Question

私は自分のウェブサイトに次のページを含むjavascriptフォームウィザードを作成していて、キャンセルして最後のページに戻って送信します

グーグルを試しましたが、1ページのフォームウィザードが表示されます

これについて私を助けてくれませんか

Answer 1

基本的に、フォームの各「ページ」をページIDを含むdivで囲むか、各フォーム要素にどのページにあるかを示すパラメーターを指定します。

次に、javascriptを使用してonclickリスナーで2つのボタンを作成します。表示されているページに応じて、前、次、またはその両方のみを表示します。最初に、最初のページに属していないすべてのdivまたは要素を非表示にし、前/次のボタンでdiv/フォーム要素の表示を変更します。

jqueryを想定すると、次のようになります。

<form>
   <div class="form_page" id="page1">
      <input type="text" name="field1" value="field1" />
   </div>
   <div class="form_page" id="page2">
      <input type="text" name="field2" value="field2" />
      <input type="submit" value="submit" />
   </div>
</form>
<div id="actions"></div>


<script>
    $(document).ready(function() {

        var numPages = $('.form_page').length;
        var currentPage = 1;
        var $actions = $('#actions');
        for(i = 2; i <= numPages; i++) {

            $('#page' + i).hide();     
        }
        var $prev = $('<input type="button" value="prev">').click(function() {

            if (currentPage > 1) {

                $('#page' + currentPage).hide();
                currentPage--;
                $('#page' + currentPage).show();
            }

        }).appendTo($actions);

        var $next = $('<input type="button" value="next">').click(function() {

            if (currentPage < numPages) {

                $('#page' + currentPage).hide();
                currentPage++;
                $('#page' + currentPage).show();
            }

        }).appendTo($actions);
    });
</script>

jsfiddleにも例を追加しました