Untitled

Faux jquery pages
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Faux Multipage Form</title>
<style>
#container {
  font-family: arial;
  width: 600px;
  margin: 0 auto;
}

form.multipage {
  width: inherit;
}

fieldset {
  width: inherit;
  background: #fff;
  border: none;
}

legend {
  font-size: 2em;
}

label {
  display: block;
}

button {
  background: black;
  color: #fff;
  border: #222;
  border-radius: 20px;
  padding: 5px 20px;
  display: block;
  margin: 20px 10px;
  clear: left;
}
button.next { float: right;}
button.previous { float: right;}

button:hover {
  background: #666;
}
input[type=text] {
  width: 550px;
}

</style>
</head>

<body>

<div id="container">

<form id="form" class="multipage" name="checkout">
<fieldset>
    <legend>Contact Details</legend>
    <label for="your_name">Your Name</label>
    <input type="text" value="" name="your_name">

    <label for="your_phone">Your Phone</label>
    <input type="text" value="" name="your_phone">

    <label for="your_address">Your Address</label>
    <input type="text" value="" name="your_address">
</fieldset>

<fieldset>
    <legend>Shipping Details</legend>
    <label for="shipping_name">Shipping Name</label>
    <input type="text" value="" name="shipping_name">

    <label for="shipping_phone">Shipping Phone</label>
    <input type="text" value="" name="shipping_phone">

    <label for="shipping_address">Shipping Address</label>
    <input type="text" value="" name="shipping_address">
</fieldset>

<fieldset>
    <legend>Payment</legend>
    <label for="payment_type">Payment Type</label>
    <select name="payment_type">
      <option>VISA</option>
      <option>MasterCard</option>
      <option>Diners</option>
    </select>

    <label for="creditcard">Credit Card</label>
    <input type="text" value="" name="creditcard">
</fieldset>

<fieldset>
    <legend>Review</legend>
    <div id="review_order" style="height: 200px; background: #efefef"></div>
    <input type="submit" name="submit">
</fieldset>
</form>

</div> <!--! end of #container -->


<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"></script>')</script>
<script type="text/javascript">
var multipageForm = {

init: function(formName) {

  var form = 'form[name=' + formName + ']';
  var fieldsets = $(form + ' fieldset');
  var totalFieldSets = fieldsets.length;

  for (var i = 0; i < fieldsets.length; i++) {
    var fieldset = fieldsets[i];

    // Hide the fieldsets
    multipageForm.hidePages(fieldset, i);
    // Create the buttons
    multipageForm.createButtons(fieldset, i, totalFieldSets, form);

  };
},

createButtons: function(fieldset, index, totalFieldSets, form) {
  var thisPage = index;
    index = index + 1,
    nextPage = index,
    prevPage = index - 1;


  if (index != totalFieldSets) {
    var nextButton = '<button class="next" date-role="button" data-gotopage="' + nextPage + '">Next</button>';
    $(fieldset).append(nextButton).on('click', 'button.next',  function(event){
          var nextLink = $(this).data('gotopage');
          $(form + ' fieldset:eq(' + thisPage + ')').hide();
          $(form + ' fieldset:eq(' + nextLink + ')').show();
      return false;
    });
  }

  if (index != 1) {
    var prevButton = '<button class="previous" date-role="button" data-gotopage="' + prevPage + '">Previous</button>';
    $(fieldset).append(prevButton).on('click', 'button.previous',  function(event){
          var nextLink = $(this).data('gotopage');
          $(form + ' fieldset:eq(' + thisPage + ')').hide();
          $(form + ' fieldset:eq(' + PrevLink + ')').show();
      return false;
    });
  }

},

hidePages: function(fieldset, index) {
  // Hide all fieldsets except the first fieldset
  if (index > 0) {
    $(fieldset).hide();
  }
}

};

multipageForm.init('checkout');
</script>

</body>
</html>

var thisPage = index;
index = index + 1,
nextPage = index,
prevPage = index - 1;

var thisPage = index;
prevPage = index - 1;
nextPage = ++index; // this also adds 1 to index