Skip to content

Instantly share code, notes, and snippets.

@mikebosco

mikebosco/SecodaryProgressivePsych.html

Created December 27, 2011 18:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikebosco/1524747 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikebosco/1524747 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pageFunctions.js
function ReadPostResponse(serviceResponse) {
// no fair cheating, we need a response object instance
if (serviceResponse === "undefined")
return;
if (serviceResponse.code === "undefined")
return
else {
switch (serviceResponse.code) {
case "1":
alert(serviceResponse.payload);
break;
case "2":
window.location.href = serviceResponse.payload;
break;
case "3":
// service is unavailable - see wiki
alert('Service Unavailable!');
default:
// see case 3
alert('Unrecognized response!');
break;
}
}
}
function checkResponse(data) {
var msg = eval(data);
// if it has the asp.net .d - negate it
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
}
var urlParams = {};
(function () {
var e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1);
while (e = r.exec(q))
urlParams[d(e[1])] = d(e[2]);
})();
$('li #sub1').click(function(){
$('#headerContent').html('<p>Subheader 1\'s content goes here</p>');
return false;
});
$('li #sub2').click(function(){
$('#headerContent').html('<p>Subheader 2\'s content goes here</p>');
return false;
});
$('li #sub3').click(function(){
$('#headerContent').html('<p>Subheader 3\'s content goes here</p>');
return false;
});
$(function(){
//original field values
var field_values = {
//id : value
'username' : 'username',
'password' : 'password',
'cpassword' : 'password',
'firstname' : 'first name',
'lastname' : 'last name',
'email' : 'email address'
};
//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] });
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] });
//Regex's for Validation
// set the regular expressions for input validation
var nameRegex = new RegExp("^[A-Za-z][a-zA-Z]*$");
var zipRegex = new RegExp("\\d{5}(-\\d{4})?");
var phoneRegex = new RegExp(/^[01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4}$/);
var emailRegex = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//check if inputs aren't empty
var fields = $('#first_step input[type=text], #first_step input[type=password]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<4 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
if(nameRegex.test($('input[name=NameFirst]').val()) == false ) {
$('input[name=NameFirst]').removeClass('valid').addClass('error').effect("shake", { times:3 }, 50);
return false;
}
else if(nameRegex.test($('input[name=NameLast]').val()) == false ) {
$('input[name=NameLast]').removeClass('valid').addClass('error').effect("shake", { times:3 }, 50);
return false;
}
else if(emailRegex.test($('input[name=EmailAddress]').val()) == false ) {
$('input[name=EmailAddress]').removeClass('valid').addClass('error').effect("shake", { times:3 }, 50);
return false;
}
else if(phoneRegex.test($('input[name=HomePhone]').val()) == false ) {
$('input[name=HomePhone]').removeClass('valid').addClass('error').effect("shake", { times:3 }, 50);
return false;
}
else {
//change the progress bar
$('#progress').attr("src", "img/ProgressBar30.png")
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
}
} else return false;
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
$('#second_step select').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
}
if(!error){
if($('input[name=AddressCity]').val().length <=3){
$('input[name=AddressCity]').removeClass('valid').addClass('error').effect("shake", {times:3 }, 50);
error++;
return false;
}
else if(((zipRegex.test($('input[name=AddressZip]').val())) == false) || (($('input[name=AddressZip]').val().toString().length) < 5)) {
$('input[name=AddressZip]').removeClass('valid').addClass('error').effect("shake", { times:3 }, 50);
error++;
return false;
}else return false;
}
});
fields = $('#second_step select');
fields.each(function(){
if($(this).val() == ""){
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
}
});
if(!error) {
//change the progress bar image
$('#progress').attr("src", "img/ProgressBar60.png")
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else return false;
});
$('#submit_third').click(function(){
$('#third_step select').removeClass('error').removeClass('valid');
var error = 0;
var fields = $('#third_step select');
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
}
});
if(!error){
//prepare the fourth step
var fields = new Array(
$('#username').val(),
$('#password').val(),
$('#email').val(),
$('#firstname').val() + ' ' + $('#lastname').val(),
$('#age').val(),
$('#gender').val(),
$('#country').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
});
//change the progress bar image
$('#progress').attr("src", "img/ProgressBar100.png")
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
}
});
$('#submit_fourth').click(function(){
//send information to server
alert('Data sent');
});
});
Raw
SecodaryProgressivePsych.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script-->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style1.css">
<!-- end CSS-->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="img/logo.png">
</div>
<div id="main">
<h1>Earn your<br><span id="styling">Psychology Degree</span><br>Online</h1>
<div id="leftcol">
<ul>
<a href=""><li id="sub1">Subheader 1</li></a>
<a href=""><li id="sub2">Subheader 2</li></a>
<a href=""><li id="sub3">Subheader 3</li></a>
<br /><br />
</ul>
<div id="content">
<h3>This is a Post Title</h3>
<div id="headerContent">
<p>Morbi condimentum tempus tincidunt. Sed neque ipsum, pulvinar eu tristique sollicitudin, tincidunt at nisi. Aenean feugiat risus sed lacus aliquam et adipiscing elit sodales. Aenean in erat sed neque convallis convallis at eu metus. In varius lacus quis diam cursus posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada...
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nec sem at eros lobortis mollis a at diam. Sed hendrerit bibendum metus, non consequat diam scelerisque eu. Nunc eu mi ut libero accumsan iaculis vitae in nulla. Morbi non metus felis. Mauris elementum faucibus metus et tempus. Curabitur cursus, odio eget luctus tristique, ligula arcu ultricies metus, eget varius risus lorem nec massa. Nullam vel mollis nulla. Donec sollicitudin sapien vel neque tempor sed tincidunt turpis luctus. Praesent feugiat dui in nisl dapibus blandit. Sed eget dolor adipiscing nunc tincidunt vestibulum eget vel ipsum.
</p>
</div>
</div>
</div>
<div id="form-wrap">
<h1>Get More Information</h1><br>
<img id="progress" src="img/ProgressBar10.png"><br><br>
<form action="index.html" id="form">
<!-- #first_step -->
<div id="first_step">
<div class="form">
<label>First Name</label>
<div class="txt-group">
<input type="text" name="NameFirst"/>
</div><br>
<label>Last Name</label>
<div class="txt-group">
<input type="text" name="NameLast" />
</div><br>
<label>Email</label>
<div class="txt-group">
<input type="text" name="EmailAddress"/>
</div><br>
<label>Phone Number</label>
<div class="txt-group">
<input type="text" name="HomePhone" maxlength="12"/>
</div>
<br><br>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!--End #first_step -->
<input type="image" src="img/submit.png" name="submit_first" id="submit_first" value="next" />
<!--<input class="submit" type="image" src="img/submit.png" name="submit"></button>-->
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #second_step -->
<div id="second_step">
<div class="form">
<label>City</label>
<div class="txt-group">
<input type="text" name="AddressCity"/>
</div>
<label>State</label>
<div class="txt-group">
<select id="AddressState" class="validate[required]" name="AddressState">
<option value=""></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<label>ZIP Code</label>
<div class="txt-group">
<input type="text" name="AddressZip" maxlength="5" />
</div>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!--End #second_step -->
<input type="image" src="img/submit.png" name="submit_second" id="submit_second" value="next" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #third_step -->
<div id="third_step">
<div class="form">
<label>Education Completed</label>
<div class="txt-group">
<select name="EDUComplete">
<option value=""></option>
<option value="GED">GED</option>
<option value="HS">High School Diploma</option>
<option value="SCL">Some College</option>
<option value="ADG">Associate's Degree</option>
<option value="BDG">Bachelor's Degree</option>
<option value="MDG">Master's Degree</option>
<option value="DDG">Doctorate</option>
</select>
</div>
<label>HS Grad Year</label>
<div class="txt-group">
<select name="HSGradYear" class="required"/>
<option value=""></option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
<option value='2009'>2009</option>
<option value='2008'>2008</option>
<option value='2007'>2007</option>
<option value='2006'>2006</option>
<option value='2005'>2005</option>
<option value='2004'>2004</option>
<option value='2003'>2003</option>
<option value='2002'>2002</option>
<option value='2001'>2001</option>
<option value='2000'>2000</option>
<option value='1999'>1999</option>
<option value='1998'>1998</option>
<option value='1997'>1997</option>
<option value='1996'>1996</option>
<option value='1995'>1995</option>
<option value='1994'>1994</option>
<option value='1993'>1993</option>
<option value='1992'>1992</option>
<option value='1991'>1991</option>
<option value='1990'>1990</option>
<option value='1989'>1989</option>
<option value='1988'>1988</option>
<option value='1987'>1987</option>
<option value='1986'>1986</option>
<option value='1985'>1985</option>
<option value='1984'>1984</option>
<option value='1983'>1983</option>
<option value='1982'>1982</option>
<option value='1981'>1981</option>
<option value='1980'>1980</option>
<option value='1979'>1979</option>
<option value='1978'>1978</option>
<option value='1977'>1977</option>
<option value='1976'>1976</option>
<option value='1975'>1975</option>
<option value='1974'>1974</option>
<option value='1973'>1973</option>
<option value='1972'>1972</option>
<option value='1971'>1971</option>
<option value='1970'>1970</option>
</select>
</div>
<label>Military</label>
<div class="txt-group">
<select name="MilitaryStatus">
<option value=""></option>
<option value="No">No</option>
<option value="yes">Yes</option>
</select>
</div>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!--End #third_step -->
<button class="submit" type="image" src="img/submit.png" name="submit_third" id="submit_third" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
</form>
</div>
</div>
<div id="footer">
<a href="#">About Us</a> | <a href="#">Privacy Policy</a>
</div>
</div> <!--! end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script src="http://cache.university-bound.com/JScript/inputfocus-0.9.min.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<script defer src="js/PageFunctions.js"></script>
<!-- end scripts-->
<!-- <script> // Change UA-XXXXX-X to be your site's ID uncomment when deployed
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script> -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment