Multi-Form

Fab

by Jitendra Pal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div id="check-out-form" class="row">
        <div form-index="0" class="form active col-sm-6 col-md-4 col-lg-4">
            <h2 class="formHeading">Shipping</h2>
            <div class="formContainer">
                <address class="shippingAddress">
                    Sandy Woodruff<br/>
                    82 Church Street<br/>
                    New Rochelle, NY 10805<br/>
                    (914) 216-3041
                </address>
                <div class="formElements">
                    <address class="shippingAddress">
                        Sandy Woodruff<br/>
                        82 Church Street<br/>
                        New Rochelle, NY 10805<br/>
                        (914) 216-3041
                    </address>
                    <div id="payPalBtn" class="btn">Add a PayPal account</div>
                    <div id="newAddBtn" class="btn">Add new address</div>
                </div>
                <div class="btn nextBtn">Next</div>
            </div>
        </div>

        <div form-index="1" class="form inactive col-sm-6 col-md-4 col-lg-4">
            <h2 class="formHeading">Billing</h2>
            <div class="formContainer">
                <div class="formElements">
                    <input type="text" class="form-control" /><br/><br/>
                    <input type="text" class="form-control" /><br/><br/>
                </div>
                <div class="btn nextBtn">Next</div>
            </div>
        </div>

        <div form-index="2" class="form inactive col-sm-6 col-md-4 col-lg-4">
            <h2...

CSS

body{
    background-color: #DADADA;
}
.form{
    background-color: white;
}
.with_border {
    border: 1px solid grey;
    height: 400px;
    margin: 15px;
}
.formHeading{
    text-align: center;
}
.formElements{
    margin:10px;
    border:1px solid black;
}
.shippingAddress{
    margin: 15px;
}
.btn{
    display: block;
    margin: 10px;
}
.nextBtn {
    background-color: black;
    color:white;
}

.inactive {
    opacity: 0.4;
    pointer-events: none;
}

.visited {
    opacity: 0.4;
    cursor: pointer;
}
.visited:not(.active) .formContainer {
    pointer-events: none;
}

.active.visited {
    opacity: 1;
}

#payPalBtn, #newAddBtn {
    border: 1px solid black;
}

JavaScript

/**
 * Created by JitendraPal on 17/08/15.
 */
;(function ($) {
    var ActiveOneForm = function(containerId, n_forms, formCls, actionBtnCls, formIndexName, lastBtnAction) {
        var oThis = this;
        oThis.containerId = containerId;
        oThis.n_forms = n_forms;
        oThis.formClass = formCls;
        oThis.actionBtnCls = actionBtnCls;
        oThis.formIndex = formIndexName;
        oThis.formStates = ["inactive", "active", "visited"];
        oThis.containerObj = $("#" + oThis.containerId);
        oThis.currentFIndex = 0;
        oThis.lastBtnAction = lastBtnAction;
        oThis.init();
    }

    ActiveOneForm.prototype = {
        constructor: ActiveOneForm,
        init: function () {
            var oThis = this;
            oThis.initEventListners();
        },
        setFormListners: function () {
            var oThis = this;
            oThis.containerObj.delegate("." + oThis.formClass, "click", function (e) {
                e = e || window.event;
                var target = e.target || e.srcElement,
                    formObj = $(target).hasClass(oThis.formClass) ? $(target) : $(target).parents("." + oThis.formClass),
                    isNextBtnClicked = $(target).hasClass(oThis.actionBtnCls)
                    ;

                // set current index
                oThis.currentFIndex = parseInt(formObj.attr(oThis.formIndex));

                if (isNextBtnClicked) {
                    // inactivate all other forms
                    oThis.deactivateOtherForms(oThis.containerObj);
                    // make current form visited
                    formObj.removeClass(oThis.formStates[0]).addClass(oThis.formStates[2]);
                    // activate next form
                    if (oThis.currentFIndex < (oThis.n_forms - 1)) {
                        formObj.next().removeClass(oThis.formStates[0]).removeClass(oThis.formStates[2]).addClass(oThis.formStates[1]).addClass(oThis.formStates[2]);
                    } else{
        ...