StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.</p> <ol> <li>Wrap all the input elements in one html form tag</li> <li>For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.</li> <li>Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".</li> <li>On your last "page" have a normal submit button and then all the form data is posted in one.</li> </ol> <p>For example, the html might look like this:</p> <pre><code><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">  <div class="box-wrapper" id="page-1"> <div class="box">  <input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/> </div> </div>  <div class="box-wrapper" id="page-2" style="display: none;"> <div class="box">  <input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/> </div> </div>  <div class="box-wrapper" id="page-3" style="display: none;"> <div class="box">  <input type="submit" name="submit" class="submit" value="Complete Registration"/> </div> </div> </form> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload