jquery-steps store form data to session

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi-step form</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/jquery.steps.css">
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie-1.3.1.js"></script>
<script src="js/jquery.steps.js"></script>

<script>
// Tries to load the saved state (step position)
if (options.saveState && $.cookie)
{
    var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
    // Sets the saved position to the start index if not undefined or out of range
    var savedIndex = parseInt(savedState, 0);
    if (!isNaN(savedIndex) && savedIndex < state.stepCount)
    {
        startIndex = savedIndex;
    }
}
</script>

</head>
<body>
<div class="container">
<div class="row">
    <div id="maincontent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
                <input name="globalstudentid" id="globalstudentid" type="hidden" value="<?php $_GET['StudentID']; ?>">
                <h2>Step</h2>
                <section data-step="0">
                    <h2>Terms and Conditions:</h2>
                    <p>Some terms and conditions text here.</p>

                      <input name="accept_terms" type="checkbox" value="" />
                      <label>I Accept the Terms and Conditions</label>

                </section>
                <h2>Step</h2>
                <section data-step="0">
                    <h2>Students Personal Details:</h2>
                      <label>First Name:</label>
                      <input name="firstname" type="text" value="" /><br />

                      <label>Last Name:</label>
                      <input name="lastname" type="text" value="" />

                </section>
                <h2>Step</h2>
                <section data-step="1">
                    <h2>College Details:</h2>
                      <label>College Name:</label>
                      <input name="collegename" type="text" value="" /><br />

                      <label>College Address:</label>
                      <input name="collegename" type="text" value="" />

                </section>
                <h2>Step</h2>
                <section data-step="2">
                    <h2>Course Details:</h2>
                      <label>Course Name:</label>
                      <input name="coursename" type="text" value="" /><br />

                      <label>Course Duration:</label>
                      <input name="courseduration" type="text" value="" />

                </section>
                </form>

            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
      function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
      }
      $("#multiphase").steps({
            headerTag: "h2",
            bodyTag: "section",
            saveState: true,
            transitionEffect:1,
            transitionEffectSpeed: 200,
            enableContentCache: true,
            onStepChanged: function(e, currentIndex, priorIndex) {
                adjustIframeHeight();
            },
      });

});

</script>

</body>
</html>