gistfile1.js

var next_path;
var form_stages;
var check_a;
var check_s;
var prev_path;
var field_val;
;(function($) {
  var app = new Sammy.Application(function() {
    with(this) {	
      get('#/stage/:id', function() { with(this) {
        
        //hide all
        $("fieldset").css("display","none");
        $("#submitted").css("display","none");
        $("#error").css("display","none");
        
        //display only the fieldset required
        $("#stage"+params['id']).css("display","block");
        
        //get number of staged, used for calculations later
        form_stages = $("fieldset").size();
        
        //progress meter
        $("p#progress").html("");
        for (i=1;i<=form_stages;i++) {
          if (i==params['id']) {
            if (($("#stage"+i+" input").val() == "") || (i==form_stages)) {
              $("p#progress").append('<span class="progress_item">Stage '+i+'</span>');
            } else {
              $("p#progress").append('<span class="progress_item_green">Stage '+i+'</span>');
            }
          } else if ($("#stage"+i+" input").val() == "") {
            $("p#progress").append('<a class="progress_item_grey" href="#/stage/'+i+'">Stage '+i+'</a>');
          } else if (i==form_stages) {
            $("p#progress").append('<span class="progress_item_last">Stage '+i+'</span>');
          } else {
            $("p#progress").append('<a class="progress_item_prev" href="#/stage/'+i+'">Stage '+i+'</a>');
          }
        }
        
        //change the "next question" link href, remove if at confirmation stage
        next_path = "#/stage/"+(parseInt(params['id'])+1);
        $(".nextq").attr("href", next_path);
        if (params['id'] == 5) {
          $("#nextq").css("display","none")
        } else {
          $("#nextq").css("display","inline")
        }
        
        //change the "prev question" link href, remove if at confirmation stage
        prev_path = "#/stage/"+(parseInt(params['id'])-1);
        $(".prevq").attr("href", prev_path);
        if (params['id'] == 5) {
          $("#prevq").css("display","none")
        } else {
          $("#prevq").css("display","inline")
        }
        
        //check stage
        if (params['id'] == form_stages) {
          //show send button
          $("input#submit_btn").css("display","block");
          //populate
          for (i=1;i<form_stages;i++) {
            check_s = "#p"+i+" span.value";
            check_a = "#p"+i+" span.valid";
            field_val = $("#stage"+i+" input").val();
            $(check_s).text(field_val);
            //validate
            if (field_val == "") {
              $(check_a).html("<img src='../images/objects/cross.gif' alt='red cross' /> <a href='#/stage/"+i+"' class='notvalid'>Empty, please amend</a>");
              $("input#submit_btn").css("display","none"); //hide button if any fields are empty
            } else {
              $(check_a).html("<img src='../images/objects/tick.gif' alt='green tick' />");
            }
          }
        }
        
      }});
      
      //submit action
      post('#/submit', function() { with(this) {
        $("fieldset").css("display","none");
        $("#submitted").css("display","block");
      }});
      
      //redirect to stage 1 of the form if any other hash is accessed
      get('', function() { with(this) {
        redirect("#/stage/1");
      }});
      
    }
  });
  $(function() {
    app.run()
  });
})(jQuery);