Best practice for making a multi step form to post adds

css, html, jquery, jquery-mobile, user-interface

Solution

You can simply create several sections and navigate between them. I have created this for you, using JQuery, CSS and jQM's built-in transitions.

The idea is simply hide/show sections by swiping left and right. You can add validation before showing next section if you want. (1)

First of all, you need to create a "progress bar" on top of sections. I have used CSS3 `flex` since it is responsive and doesn't require too much code. It is straight-forward.

Progress bar

HTML

<div class="ui-content" role="main">
  <div class="progress">
     <p>1</p>
     <div class="line"></div>
     <p>2</p>
     <div class="line"></div>
     <p>3</p>
     <div class="line"></div>
     <p>4</p>
     <div class="line"></div>
     <p>5</p>
   </div>
   <!-- sections here -->
</div>

CSS

.ui-content .progress {
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    width: 100%;
    background: skyblue;
    align-items: center;
    padding: .5em;
}

.ui-content .progress * {
    margin: 0;
}

.ui-content .progress p {
    background: lightblue;
    height: 22px;
    width: 22px;
    border-radius: 22px;
    text-align: center;
}

.ui-content .progress .line {
    border-top: 1px solid black;
    flex-grow: 1;
    -webkit-align-self: center; /* center line on mobile browsers */
    -ms-flex-item-align: center;
    align-self: center;
}

Sections and their wrapper

HTML

<div class="steps"> <!-- wrapper -->
  <div class="step">
    <!-- contents 1 -->
  </div>
  <div class="step">
    <!-- contents 2 -->
  </div>
  ...etc
</div>

CSS

.ui-content .steps {
   padding: 1em;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

General CSS

.ui-page .ui-content {
   padding:0;
}

.ui-content * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* active step - progress bar */
.progress .currentStep {
    background: tomato !important;
    font-weight: bold;
}

jQuery

$(document).on("pagecreate", "#wizard", function () {
    $(".step").not(":eq(0)").addClass("ui-screen-hidden");
    $(".step:eq(0)").addClass("active");
    $(".progress p:eq(0)").addClass("currentStep");
    $(".ui-content").on("swipeleft swiperight", function (e) {
        var swipe = e.type,
            nextStep = $(".steps").find(".active").next(".step"),
            prevStep = $(".steps").find(".active").prev(".step");
        switch (true) {
            case (swipe == "swipeleft" && nextStep.length > 0):
                $(".step.active")
                    .toggleClass("slide out");
                break;
            case (swipe == "swiperight" && prevStep.length > 0):
                $(".step.active")
                    .toggleClass("slide out reverse");
                break;
        }
    });
}).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".step", function (e) {
    var elm = $(e.target);
    switch (true) {
        case (elm.hasClass("out") && !elm.hasClass("reverse")):
            $(elm).toggleClass("slide out ui-screen-hidden active");
            $(elm).next(".step").toggleClass("slide in active ui-screen-hidden");
            break;
        case (elm.hasClass("out") && elm.hasClass("reverse")):
            $(elm).toggleClass("slide out ui-screen-hidden reverse active");
            $(elm).prev(".step").toggleClass("slide in active reverse ui-screen-hidden");
            break;
        case (elm.hasClass("in") && !elm.hasClass("reverse")):
            elm.toggleClass("slide in");
            break;
        case (elm.hasClass("in") && elm.hasClass("reverse")):
            elm.toggleClass("slide in reverse");
            break;
    }
    var dot = $(".active").index();
    /* highlight all previous numbers */
    $("p:eq(" + dot + ")").prevAll("p").addBack().addClass("currentStep");
    $("p:eq(" + dot + ")").nextAll("p").removeClass("currentStep");
});

Explanation

On `pagecreate`, all sections will be hidden except for first one by adding `ui-screen-hidden` which is a built-in class in jQM `display: none;`. Also, `.currentStep` class will be added to first element "`p`" in progress bar.

On `swipeleft` or `swiperight`, the code checks if active section has any sibling section before or after it. If `true`, it moves to that section, otherwise `false`.

Navigating between sections uses jQM built-in transition, the same ones used for page transition. In this demo `.slide` is used, however, you can use any of jQM transitions. `.in`, `.out` and `.reverse` are also built-in transition classes, `.out` is added to active section, `.in` is added to next/prev section and `.reverse` combines both aforementioned classes in case you navigate to previous section.

Listening Animation End event(s) `animationend` is used to remove `.in`, `.out` and `.reverse`, in addition to giving active section a `.active` class.

Last block of code is used to update progress bar with the number of active section. Updated

Demo (2) - Code

(1) This example can be used also as a simple gallery carousel without the need to use plugins.

(2) Tested on iPhone 5 - Safari & Chrome

Problem

Original source