var app = angular.module('PepsiEventApp', ['ngRoute', 'ngCookies', 'ngAnimate'])
.service('myService', ['$cookieStore', function ($cookieStore)
{
this.detailsContents =
{
eventInterest: null,
firstName: null,
lastName: null,
badgeName: null,
selectedTitle: null,
gender: null,
jobTitle: null,
nationality: null,
dateOfBirth: null,
address1: null,
address2: null,
city: null,
selectedState: null,
postcode: null,
selectedCountry: null,
mobileNo: null,
emailAddress: null,
emergencyContactName: null,
emergencyContactNo: null,
dietary: null,
submitted: null
};
this.saveEventState = function()
{
$cookieStore.put('detailsContents', this.detailsContents);
}
this.loadEventState = function()
{
if ($cookieStore.get('detailsContents')){
this.detailsContents = $cookieStore.get('detailsContents');
}
}
this.clearEventState = function()
{
$cookieStore.remove('detailsContents');
}
//This service is a singleton and exists outside of scope
//It's available globally, so we can store our data here.
/*
return {
saveEventState: function() {
$cookieStore.put('lastName', lastName);
},
loadEventState: function() {
lastName = $cookieStore.get('lastName');
}
}
*/
}]
);
appDetailsCtrl = app.controller('DetailsCtrl', ['$scope', '$location', 'myService', function($scope, $location, myService){
appDetailsCtrl.populateData($scope, myService);
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid)
{
switch ($scope.submitType)
{
case 'Save':
break;
case 'Again':
break;
case 'Next':
// check to make sure the form is completely valid
if (isValid) {
appDetailsCtrl.saveData($scope, myService);
$location.path( "/flights" );
}
else
{
//window.scrollTo(0,0);
$("html, body").animate({ scrollTop: 0 }, "slow");
}
$scope.submitted = true;
break;
}
};
$scope.sortUserControl = function(controlType)
{
switch (controlType)
{
case 'Logout':
myService.clearEventState();
$location.path( "/logout" );
break;
}
};
}]);
//
// Load data into our service from an AJAX call, pulling in data from the database
//
appDetailsCtrl.loadData = function($q, myService)
{
// We can load our data via an AJAX call here from the PHP script
if (!myService.detailsContents || !myService.detailsContents.submitted)
{
myService.loadEventState();
}
};
//
// Populate the Details Control from the Service etc
//
appDetailsCtrl.populateData = function($scope, myService)
{
$scope.$on('$viewContentLoaded', function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$scope.title = "Details";
$scope.eventInterest = myService.detailsContents.eventInterest;
$scope.firstName = myService.detailsContents.firstName;
$scope.lastName = myService.detailsContents.lastName;
$scope.badgeName = myService.detailsContents.badgeName;
$scope.selectedTitle = myService.detailsContents.selectedTitle;
$scope.gender = myService.detailsContents.gender;
$scope.jobTitle = myService.detailsContents.jobTitle;
$scope.nationality = myService.detailsContents.nationality;
$scope.dateOfBirth = myService.detailsContents.dateOfBirth;
$scope.address1 = myService.detailsContents.address1;
$scope.address2 = myService.detailsContents.address2;
$scope.city = myService.detailsContents.city;
$scope.selectedState = myService.detailsContents.selectedState;
$scope.postcode = myService.detailsContents.postcode;
$scope.selectedCountry = myService.detailsContents.selectedCountry;
$scope.mobileNo = myService.detailsContents.mobileNo;
$scope.emailAddress = myService.detailsContents.emailAddress;
$scope.emergencyContactName = myService.detailsContents.emergencyContactName;
$scope.emergencyContactNo = myService.detailsContents.emergencyContactNo;
$scope.dietary = myService.detailsContents.dietary;
$scope.detailsForm = {};
$scope.titles = ['Mr',
'Miss',
'Mrs',
'Ms',
'Dr',
'Other'];
$scope.states = ['Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Carolina',
'North Dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'];
$scope.countries = [
'United Kingdom',
'Germany',
'Malaysia',
'Zimbabwe'];
};
appDetailsCtrl.saveData = function($scope, myService)
{
myService.detailsContents.eventInterest = $scope.eventInterest;
myService.detailsContents.firstName = $scope.firstName;
myService.detailsContents.lastName = $scope.lastName;
myService.detailsContents.badgeName = $scope.badgeName;
myService.detailsContents.selectedTitle = $scope.selectedTitle;
myService.detailsContents.gender = $scope.gender;
myService.detailsContents.jobTitle = $scope.jobTitle;
myService.detailsContents.nationality = $scope.nationality;
myService.detailsContents.dateOfBirth = $scope.dateOfBirth;
myService.detailsContents.address1 = $scope.address1;
myService.detailsContents.address2 = $scope.address2;
myService.detailsContents.city = $scope.city;
myService.detailsContents.selectedState = $scope.selectedState;
myService.detailsContents.postcode = $scope.postcode;
myService.detailsContents.selectedCountry = $scope.selectedCountry;
myService.detailsContents.mobileNo = $scope.mobileNo;
myService.detailsContents.emailAddress = $scope.emailAddress;
myService.detailsContents.emergencyContactName = $scope.emergencyContactName;
myService.detailsContents.emergencyContactNo = $scope.emergencyContactNo;
myService.detailsContents.dietary = $scope.dietary;
myService.detailsContents.submitted = 'true';
myService.saveEventState();
};
appFlightsCtrl = app.controller('FlightsCtrl', ['$scope', '$location', 'myService', function($scope, $location, myService){
$scope.$on('$viewContentLoaded', function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$scope.title = "Flights";
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid)
{
switch ($scope.submitType)
{
case 'Back':
$location.path( "/details" );
break;
case 'Save':
break;
case 'Again':
break;
case 'Next':
// check to make sure the form is completely valid
if (isValid) {
$location.path( "/attendance" );
}
else
{
//window.scrollTo(0,0);
$("html, body").animate({ scrollTop: 0 }, "slow");
}
$scope.submitted = true;
break;
}
};
}]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
controller : 'DetailsCtrl',
templateUrl : 'details.html',
resolve: {
loadData: appDetailsCtrl.loadData
}
})
.when('/details', {
controller : 'DetailsCtrl',
templateUrl : 'details.html',
resolve: {
loadData: appDetailsCtrl.loadData
}
})
.when('/flights', {
controller : 'FlightsCtrl',
templateUrl : 'flights.html',
resolve: {
loadData: appFlightsCtrl.loadData
}
})
.otherwise({
redirectTo : '/details'
});
}]);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="PepsiEventApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script data-require="angular-route@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<script data-require="angular-cookies@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-cookies.js"></script>
<script data-require="angular-animate@1.2.16" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-animate.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="http://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-offset-top="285">
<div class="container-fluid">
<div class="navbar-header emuheader">
<br />
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#/details">Details</a>
</li>
<li>
<a href="#/flights">Flights</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 reveal-animation" ng-view=""></div>
</div>
</div>
<div class="push"></div>
</div>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4 class="footerheader">Registration</h4>
<ul class="nav">
<li>
<a class="footerheader" href="../registration/login.php">Login</a>
</li>
<li>
<a class="footerheader" href="../registration/forgot-password.php">Forgot Password</a>
</li>
<li>
<a class="footerheader" href="../registration/index.php">Registration</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4 class="footerheader">Event</h4>
<ul class="nav">
<li>
<a class="footerheader" href="../information.html">Information</a>
</li>
<li>
<a class="footerheader" href="../agenda.html">Agenda</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4 class="footerheader">Travel</h4>
<ul class="nav">
<li>
<a class="footerheader" href="../transportation.html">Transportation</a>
</li>
<li>
<a class="footerheader" href="../hotel.html">Hotel</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4 class="footerheader">Help</h4>
<ul class="nav">
<li>
<a class="footerheader" href="../contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="emufooter">
</div>
</body>
</html>
/* Styles go here */
/*
Start of Warning Colouring
*/
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
color: red;
}
.has-error .form-control {
border-color: red;
}
.alert-warning,
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning .form-control-feedback,
.has-warning .input-group-addon,
.list-group-item-warning,
a.list-group-item-warning,
a.list-group-item-warning:focus,
.panel-warning > .panel-heading,
.text-warning {
color: red;
}
.has-warning .form-control,
.has-warning .input-group-addon,
a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
border-color: red;
}
.has-warning .form-control {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
background-color: red;
}
/*
End of Warning Colouring
*/
.form-group{
margin-bottom:0px
}
.footerheader{
color:white;
}
footer{
background-color: #229944;
}
.emufooter {
text-align: right;
background: red;
color:white;
padding-right: 100px;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
/*
As we have a fixed navbar, we need to make sure we add some padding to the body so that this is taken into account
Otherwise we end up with Overlaps
*/
body {
padding-top:200px;
position: relative;
}
.navbar-nav{
background-color: #F57A3A;
width:100%;
text-align: center;
}
/*
Set the Font Styling for the links int eh NavBar
*/
.navbar-default .navbar-nav > li > a {
font-family: "Oswald";
text-decoration: underline;
color: #FFFFFF;
}
.navbar-header {
text-align:center;
width:100%;
background-color: white;
}
/*
This is our Blue Bar at the Top of the page
*/
.emuheader {
background-color: #349CF8;
}
/*
CSS for larger screens
*/
.container{
max-width: 970px;
text-align:center;
}
.mySidebar.affix {
position: fixed;
top: 250px;
}
.mySidebar.affix-bottom {
position: absolute;
top: auto;
bottom: 450px;
}
.mySidebar.affix-top {
}
.navbar > .container {
text-align: center;
width:100%;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
float: none;
display: inline-block;
text-align: center;
margin: auto;
}
.collapse.navbar-collapse {
width: 100%;
clear: none;
text-align: center;
}
/*
CSS for smaller screens...
Get rid of the padding and borders when the screen is shrunk below 768 pixels
*/
@media (max-width: 767px) {
.container-fluid {
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}
}
.panel-footer {
text-align: center;
}
.bg-info {
width: 100%;
}
.panel-body {
text-align: center;
padding: 5px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #000;
background-color: #349CF8;
}
/*
Center our image in our header
*/
.navbar-header > a > .img-responsive {
margin-left: auto;
margin-right: auto;
}
/*
Section Headers
*/
.legend-highlight {
color:white;
background-color: #349CF8;
text-align:center;
}
/*
The Coluring of the Side Panel Header
*/
.panel-primary>.panel-heading {
color: #fff;
background-color: #349CF8;
border-color: #349CF8;
}
.navbar-nav > li > a {
padding-top:2px !important;
padding-bottom:5px !important;
}
.navbar {
min-height:40px !important
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
input[type=checkbox] {
height: 20px;
}
.attendanceTable {
border: solid 1px black;
border-radius: 10px;
max-width: 400px;
padding: 0px
}
.attendanceTable {
background-color: #f0f0f0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.reveal-animation.ng-enter {
-webkit-animation: Fade-Enter-Anime 1s;
-moz-animation: Fade-Enter-Anime 1s;
animation: Fade-Enter-Anime 1s;
}
.Content-Fade-Leave {
-webkit-animation: Fade-Leave-Anime 1s;
-moz-animation: Fade-Leave-Anime 1s;
animation: Fade-Leave-Anime 1s;
}
@keyframes Fade-Enter-Anime {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Fade-Leave-Anime {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes Fade-Enter-Anime {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes Fade-Leave-Anime {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes Fade-Enter-Anime {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes Fade-Leave-Anime {
from { opacity: 1; }
to { opacity: 0; }
}
<div class="container">
<div class="row-centered">
<br/>
<p class="bg-info">Please read our <a href="" target="_blank" class="class1">terms and conditions</a> before proceeding.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-9 column">
<!--<legend id="sectiontitle" data-spy="affix" data-offset-top="120">Personal Details</legend>-->
<legend>{{ title }}</legend>
<legend class="legend-highlight">Personal Details</legend>
<form name="detailsForm" ng-submit="submitForm(detailsForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="row" ng-class="{ 'has-error' : eventInterest==null && submitted }">
<label for="name" class="col-sm-6 control-label">Do you plan on attending the RMU event? {{ eventInterest }}</label>
<div class="col-sm-4">
<label class="checkbox-inline">
Yes <input type="radio" ng-model="eventInterest" value="Yes" ng-required="true" ng-click>
</label>
<label class="checkbox-inline">
No <input type="radio" ng-model="eventInterest" value="No" ng-required="true" ng-click>
</label>
<p class="help-block" ng-show="eventInterest==null && submitted">Event Interest is required</p>
<p></p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : selectedTitle==null && submitted }">
<label for="selectedTitle" class="col-sm-6 control-label">Title</label>
<div class="col-sm-4">
<select class="form-control" data-ng-model="selectedTitle" data-ng-options="title for title in titles" placeholder="Title" required></select>
<p class="help-block" ng-show="selectedTitle==null && submitted">Title is required</p>
<p></p>
</div>
</div>
<div class="row" ng-class="{ 'has-error' : gender==null && submitted }">
<label for="gender" class="col-sm-6 control-label">Gender</label>
<div class="col-sm-4">
<label class="checkbox-inline">
Male <input type="radio" ng-model="gender" value="male" required ng-click>
</label>
<label class="checkbox-inline">
Female <input type="radio" ng-model="gender" value="femmale" required ng-click>
</label>
<p></p>
<p class="help-block" ng-show="gender==null && submitted">Gender is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.firstName.$invalid && submitted }">
<label for="firstName" class="col-sm-6 control-label">First Name (As shown on Passport)</label>
<div class="col-sm-4">
<input type="text" id="firstName" name="firstName" class="form-control" ng-model="firstName" placeholder="First Name" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.firstName.$invalid && submitted">First Name is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.lastName.$invalid && submitted }">
<label for="lastName" class="col-sm-6 control-label">Family Name (As shown on Passport)</label>
<div class="col-sm-4">
<input type="text" id="lastName" name="lastName" class="form-control" ng-model="lastName" placeholder="Last Name" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.lastName.$invalid && submitted">Last Name is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.badgeName.$invalid && submitted }">
<label for="badgeName" class="col-sm-6 control-label">Name as you'd like it to appear on the badge</label>
<div class="col-sm-4">
<input type="text" id="" name="badgeName" class="form-control" ng-model="badgeName" placeholder="Badge Name" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.badgeName.$invalid && submitted">Badge Name is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.jobTitle.$invalid && submitted }">
<label for="jobTitle" class="col-sm-6 control-label">Job Title</label>
<div class="col-sm-4">
<input type="text" id="" name="jobTitle" class="form-control" ng-model="jobTitle" placeholder="Job Title" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.jobTitle.$invalid && submitted">Badge Name is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.nationality.$invalid && submitted }">
<label for="nationality" class="col-sm-6 control-label">Nationality</label>
<div class="col-sm-4">
<input type="text" id="" name="nationality" class="form-control" ng-model="nationality" placeholder="Nationality" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.nationality.$invalid && submitted">Nationality is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.dateOfBirth.$invalid && submitted }">
<label for="dateOfBirth" class="col-sm-6 control-label">Date of Birth (dd/mm/yyyy)</label>
<div class="col-sm-4">
<input type="date" id="" name="dateOfBirth" class="form-control" ng-model="dateOfBirth" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.dateOfBirth.$invalid && submitted">Date of Birth is required</p>
</div>
</div>
<legend class="legend-highlight">Address</legend>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.address1.$invalid && submitted }">
<label for="address1" class="col-sm-6 control-label">Address Line 1</label>
<div class="col-sm-4">
<input type="text" id="" name="address1" class="form-control" ng-model="address1" placeholder="Address 1" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.address1.$invalid && submitted">Address is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.address2.$invalid && submitted }">
<label for="address2" class="col-sm-6 control-label">Address Line 2</label>
<div class="col-sm-4">
<input type="text" id="" name="address2" class="form-control" ng-model="address2" placeholder="Address 2" onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.address1.$invalid && submitted">Address is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.city.$invalid && submitted }">
<label for="city" class="col-sm-6 control-label">City</label>
<div class="col-sm-4">
<input type="text" id="" name="city" class="form-control" ng-model="city" required placeholder="City" onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.city.$invalid && submitted">City is required</p>
</div>
</div>
<div class="form-group">
<label for="selectedState" class="col-sm-6 control-label">State</label>
<div class="col-sm-4">
<select class="form-control" data-ng-model="selectedState" data-ng-options="state for state in states"></select>
<p></p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.postcode.$invalid && submitted }">
<label for="postcode" class="col-sm-6 control-label">Postcode/ZipCode</label>
<div class="col-sm-4">
<input type="text" id="" name="postcode" class="form-control" ng-model="postcode" placeholder="PostCode / ZipCode" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.postcode.$invalid && submitted">PostCode / ZipCode is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : selectedCountry==null && submitted }">
<label for="selectedCountry" class="col-sm-6 control-label">Country</label>
<div class="col-sm-4">
<select class="form-control" data-ng-model="selectedCountry" data-ng-options="country for country in countries"></select>
<p></p>
<p class="help-block" ng-show="selectedCountry==null && submitted">Country is required</p>
</div>
</div>
<legend class="legend-highlight">Contact</legend>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.mobileNo.$invalid && submitted }">
<label for="mobileNo" class="col-sm-6 control-label">Mobile Telephone No</label>
<div class="col-sm-4">
<input type="tel" id="" name="mobileNo" class="form-control" ng-model="mobileNo" placeholder="Mobile Number" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.mobileNo.$invalid && submitted">Mobile Number is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.emailAddress.$invalid && submitted }">
<label for="emailAddress" class="col-sm-6 control-label">Email Address</label>
<div class="col-sm-4">
<input type="email" id="" name="emailAddress" class="form-control" ng-model="emailAddress" placeholder="Email Address" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.emailAddress.$invalid && submitted">Email Address is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.emergencyContactName.$invalid && submitted }">
<label for="emergencyContactName" class="col-sm-6 control-label">Emergency Contact Name</label>
<div class="col-sm-4">
<input type="text" id="" name="emergencyContactName" class="form-control" ng-model="emergencyContactName" placeholder="Emergence Name" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.emergencyContactName.$invalid && submitted">Emergency Contact Name is Required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.emergencyContactNo.$invalid && submitted }">
<label for="emergencyContactNo" class="col-sm-6 control-label">Emergency Contact Telephone Number</label>
<div class="col-sm-4">
<input type="tel" id="" name="emergencyContactNo" class="form-control" ng-model="emergencyContactNo" placeholder="Emergency Number" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.emergencyContactNo.$invalid && submitted">Emergency Contact Number is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.dietary.$invalid && submitted }">
<label for="dietary" class="col-sm-6 control-label">Dietary Requirements</label>
<div class="col-sm-4">
<input type="text" id="" name="dietary" class="form-control" ng-model="dietary" placeholder="Dietary Requirements" onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.dietary.$invalid && submitted">Dietary Requirement is Required</p>
</div>
</div>
<br/>
<div class="col-md-offset-4 col-md-7">
<div class="btn-group">
<button type="submit" name="save" ng-click="submitType = 'Save'" class="btn btn-default btn-info btn-lg">Save for later <span class="glyphicon glyphicon-download-alt"></span></button>
<button type="submit" name="again" ng-click="submitType = 'Again'" class="btn btn-default btn-danger btn-lg" onClick="javascript:return confirm('Are you sure you want to Restart? All entered data will be lost!')">Restart <span class="glyphicon glyphicon-repeat"></span></button>
<button type="submit" name="submit" ng-click="submitType = 'Next'" class="btn btn-default btn-success btn-lg" ng-disabled="detailsForm.$invalid && submitted">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</form>
</div> <!-- End of Left Column -->
<div class="col-sm-3">
<div class="panel panel-primary mySidebar affix" id="sidebar" data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<div class="panel-heading">
<strong>Hello</strong>
</div>
<div class="panel-body">
<strong>You are booking:</strong><br>
<img src="http://www.pjgcreations.co.uk/images/temp-logo2.JPG" width="89" height="143"><br/>
<strong>Conference 2014</strong><br/>
Conference Hall Berlin<br/>
3rd - 4th August 2014<br/>
</div>
<div class="panel-footer">
<div class="btn-group-vertical">
<button name="logout" ng-click="sortUserControl('Logout')" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-out"></span> Logout</button>
<a href="change-password.php" class="btn btn-default btn-warning"><span class="glyphicon glyphicon-wrench"></span> Change Password</a>
<a href="update-email-address.php" class="btn btn-default btn-info"><span class="glyphicon glyphicon-envelope"></span> Update Email</a>
</div>
</div>
</div>
</div><!--End of Right Column-->
</div> <!-- End of Row -->
</div> <!-- End of Main Content -->
</br>
<div class="container">
<div class="row-centered">
<br/>
<p class="bg-info">Please read our <a href="" target="_blank" class="class1">terms and conditions</a> before proceeding.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-9 column">
<!--<legend id="sectiontitle" data-spy="affix" data-offset-top="120">Personal Details</legend>-->
<legend>{{ title }}</legend>
<legend class="legend-highlight">Passport Details</legend>
<form name="detailsForm" ng-submit="submitForm(detailsForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="form-group" ng-class="{ 'has-error' : detailsForm.passportNumber.$invalid && submitted }">
<label for="passportNumber" class="col-sm-6 control-label">Passport Number</label>
<div class="col-sm-4">
<input type="text" id="passportNumber" name="passportNumber" class="form-control" ng-model="passportNumber" placeholder="Passport Number" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.passportNumber.$invalid && submitted">Passport Number is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.passportIssueDate.$invalid && submitted }">
<label for="passportIssueDate" class="col-sm-6 control-label">Passport Issue Date (dd/mm/yy)</label>
<div class="col-sm-4">
<input type="date" id="passportIssueDate" name="passportIssueDate" class="form-control" ng-model="passportIssueDate" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.passportIssueDate.$invalid && submitted">Passport Issue Date is Required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.passportExpiryDate.$invalid && submitted }">
<label for="" class="col-sm-6 control-label">Passport Expiry Date (dd/mm/yy)</label>
<div class="col-sm-4">
<input type="date" id="passportExpiryDate" name="passportExpiryDate" class="form-control" ng-model="passportExpiryDate" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.passportExpiryDate.$invalid && submitted">Passport Expiry Date is Required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.passportIssueLocation.$invalid && submitted }">
<label for="passportIssueLocation" class="col-sm-6 control-label">Place of Issue</label>
<div class="col-sm-4">
<input type="text" id="passportIssueLocation" name="passportIssueLocation" class="form-control" ng-model="passportIssueLocation" placeholder="Place of Issue" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.passportIssueLocation.$invalid && submitted">Passport Issue Location is required</p>
</div>
</div>
<legend class="legend-highlight">Inbound Flight Details</legend>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightNumberIn.$invalid && submitted }">
<label for="flightNumberIn" class="col-sm-6 control-label">Flight Number</label>
<div class="col-sm-4">
<input type="text" id="flightNumberIn" name="flightNumberIn" class="form-control" ng-model="flightNumberIn" placeholder="Flight Number" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightNumberIn.$invalid && submitted">Flight Number is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightFromIn.$invalid && submitted }">
<label for="flightFromIn" class="col-sm-6 control-label">From</label>
<div class="col-sm-4">
<input type="text" id="flightFromIn" name="flightFromIn" class="form-control" ng-model="flightFromIn" placeholder="From" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightFromIn.$invalid && submitted">From is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightDateIn.$invalid && submitted }">
<label for="flightDateIn" class="col-sm-6 control-label">Date (dd/mm/yy)</label>
<div class="col-sm-4">
<input type="date" id="flightDateIn" name="flightDateIn" class="form-control" ng-model="flightDateIn" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightDateIn.$invalid && submitted">Flight Date is Required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightTimeIn.$invalid && submitted }">
<label for="" class="col-sm-6 control-label">Time of Arrival <i>(24 Hour Clock:<br> hh:mm : e.g 17:10)</i></label>
<div class="col-sm-4">
<input type="time" id="flightTimeIn" name="flightTimeIn" class="form-control" ng-model="flightTimeIn" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightTimeIn.$invalid && submitted">Flight Time is Required</p>
</div>
</div>
<legend class="legend-highlight">Outbound Flight Details</legend>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightNumberOut.$invalid && submitted }">
<label for="flightNumberOut" class="col-sm-6 control-label">Flight Number</label>
<div class="col-sm-4">
<input type="text" id="flightNumberOut" name="flightNumberOut" class="form-control" ng-model="flightNumberOut" placeholder="Flight Number" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightNumberOut.$invalid && submitted">Flight Number is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightFromOut.$invalid && submitted }">
<label for="flightFromOut" class="col-sm-6 control-label">From</label>
<div class="col-sm-4">
<input type="text" id="flightFromOut" name="flightFromOut" class="form-control" ng-model="flightFromOut" placeholder="From" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightFromOut.$invalid && submitted">From is required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightDateOut.$invalid && submitted }">
<label for="flightDateOut" class="col-sm-6 control-label">Date (dd/mm/yy)</label>
<div class="col-sm-4">
<input type="date" id="flightDateOut" name="flightDateOut" class="form-control" ng-model="flightDateOut" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightDateOut.$invalid && submitted">Flight Date is Required</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : detailsForm.flightTimeOut.$invalid && submitted }">
<label for="" class="col-sm-6 control-label">Time of Departure <i>(24 Hour Clock:<br> hh:mm : e.g 17:10)</i></label>
<div class="col-sm-4">
<input type="time" id="flightTimeOut" name="flightTimeOut" class="form-control" ng-model="flightTimeOut" required onKeyPress="return noenter()">
<p></p>
<p class="help-block" ng-show="detailsForm.flightTimeOut.$invalid && submitted">Flight Time is Required</p>
</div>
</div>
<br/>
<div class="col-md-offset-2 col-md-9">
<div class="btn-group">
<button type="submit" name="back" ng-click="submitType = 'Back'" class="btn btn-default btn-warning btn-lg"><span class="glyphicon glyphicon-chevron-left"></span> Back</button>
<button type="submit" name="save" ng-click="submitType = 'Save'" class="btn btn-default btn-info btn-lg">Save for later <span class="glyphicon glyphicon-download-alt"></span></button>
<button type="submit" name="again" ng-click="submitType = 'Again'" class="btn btn-default btn-danger btn-lg" onClick="javascript:return confirm('Are you sure you want to Restart? All entered data will be lost!')">Restart <span class="glyphicon glyphicon-repeat"></span></button>
<button type="submit" name="submit" ng-click="submitType = 'Next'" class="btn btn-default btn-success btn-lg" ng-disabled="detailsForm.$invalid && submitted">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</form>
</div> <!-- End of Left Column -->
<div class="col-sm-3">
<div class="panel panel-primary mySidebar" id="sidebar" data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<div class="panel-heading">
<strong>Hello</strong>
</div>
<div class="panel-body">
<strong>You are booking:</strong><br>
<img src="http://www.pjgcreations.co.uk/images/temp-logo2.JPG" width="89" height="143"><br/>
<strong>Conference 2014</strong><br/>
Conference Hall Berlin<br/>
3rd - 4th August 2014<br/>
</div>
<div class="panel-footer">
<div class="btn-group-vertical">
<a href="logout.php" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
<a href="change-password.php" class="btn btn-default btn-warning"><span class="glyphicon glyphicon-wrench"></span> Change Password</a>
<a href="update-email-address.php" class="btn btn-default btn-info"><span class="glyphicon glyphicon-envelope"></span> Update Email</a>
</div>
</div>
</div>
</div><!--End of Right Column-->
</div> <!-- End of Row -->
</div> <!-- End of Main Content -->
<br />
data-spy affix not working when change view.