how can i make a javascript form wizard in muilt pages with a next and cancel and back and submit the last page

Question

i am creating a javascript form wizard with muilt pages in my website with a next and cancel and back and submit on the last page

i tried google but it shows one page form wizards

please can you help me on this

Answer 1

Basically you would surround each "page" of the form with a div containing the page ID or give each form element a parameter to indicate on which page it is.

Then you would create two buttons wich onclick listeners using javascript. Depending on the visible page only show prev, next, or both. Initially you make all divs or elements which not belong to the first page invisible and on a prev/next button you would change the visibility of your divs/form elements.

assuming jquery it oculd look like this:

<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>

also added the example to jsfiddle