app/views/applyb/b_bay_apply.erb
<!--#include file="app/views/layouts.html.erb"-->
<title>B-BAY</title>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Navbar.css">
<link rel="stylesheet" type="text/css" href="CSS/apply.css">
<!--<link rel="stylesheet" type="text/css" href="CSS/index.css">-->
</head>
<div class="left-view" style=background>
<div class="left-text">
<h4>B-BAY</h4><br>
<p>Berkeley Business Academy for Youth</p><br>
<p><a class="btn btn-primary btn-lg" href="/about_us" role="button">More »</a></p>
</div>
</div>
<!--<div class="right-view">-->
<%= form_tag :action=> "create", :html => {:multipart => true} do %>
<div id="error_explanation" class="field_with_errors">
<% if @student != nil and @student.errors.any? %>
<!--<div id="error_explanation">-->
<ul>
<% @student.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
<% end %>
<% if flash[:error] %>
<div class="error"><%= flash[:error] %></div>
<% end %>
<% if flash[:notice] %>
<div class="notice"><%= flash[:notice] %></div>
<% end %>
</div>
<div class="application current">
<h1>Personal Info</h1>
<%= text_field(:student, :first_name, {:class => 'applyf name', :placeholder => "First Name"})%>
<%= text_field(:student, :last_name, {:class => 'applyf name', :placeholder => "Last Name"})%>
<%= email_field(:student, :email, {:class => 'applyf', :placeholder => "Email"})%>
<%= number_field(:student, :age, {:class => 'applyf', :placeholder => "Age"})%>
<%= select(:student, :gender, ['Gender','Male', 'Female'], {:class =>"gender"})%>
<%= label(:student, :dateOfBirth, 'Birthday', {:class => "bday"})%>
<%= date_select :student, :dateOfBirth, :start_year=>1900%>
</div>
<div class="application next">
<h1>Contact Info</h1>
<%= select(:student, :country, ['Country','U.S.', 'CHINA'])%>
<%= select(:student, :country_code, ['+86', '+1'])%>
<%= telephone_field(:student, :phone_number, {:class => 'applyf', :placeholder => "Phone Number"})%>
<%= text_field(:student, :addressLineOne, {:class => 'applyf', :placeholder => "Address Line One"})%>
<%= text_field(:student, :addressLineTwo, {:class => 'applyf', :placeholder => "Address Line Two"})%>
<%= text_field(:student, :province, {:class => 'applyf province', :placeholder => "State/Province"})%>
<%= text_field(:student, :city, {:class => 'applyf city', :placeholder => "City"})%>
<%= text_field(:student, :zipCode, {:class => 'applyf zc', :placeholder => "Zipcode"})%>
</div>
<div class="application next">
<h1>Education Background</h1>
<%= text_field(:student, :school, {:class => 'applyf', :placeholder => "School"})%>
<%= text_field(:student, :grade, {:class => 'applyf', :placeholder => "Grade"})%>
<%= hidden_field_tag(:program, "b-bay") %>
<%= hidden_field_tag(:language, "en") %>
<!--remove later before submit-->
<input type="submit" value="Submit" class="btn submit-btn useless">
</div>
<div class="form-nav">
<a class="btn bright" id="next">Next</a>
<!--<a class= "btn" id="prev" style="display: none;">Back</a>-->
<a class= "btn bleft" id="prev" style="display: none;">Back</a>
<input type="submit" id="submit" value="Submit" class="btn submit-btn" style="display: none;">
</div>
<% end %>
<!--INCLUDE SCRIPT FILES-->
<!--<script type="text/javascript" src="../apply.js"></script>-->
<script>
$(function () {
var stepNumber = 0,
sumProgPortion = 0,
appStepsTotal = $('.application').length,
progPortion = 100 / appStepsTotal;
// APPLICATION FORM
$('#next').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('submit-btn')) {
return;
}
var $inView = $('.current');
$('.current').next().removeClass('next').addClass('current');
$inView.removeClass('current').addClass('prev');
stepNumber++;
sumProgPortion = sumProgPortion + progPortion;
if (stepNumber > 0) {
$('#prev').show();
}
if (stepNumber === appStepsTotal - 1) {
$('#next').hide();
$('.submit-btn').show();
e.stopPropagation();
}
});
$('#prev').on('click', function (e) {
e.preventDefault();
var $inView = $('.current');
$('.current').prev().removeClass('prev').addClass('current');
$inView.removeClass('current').addClass('next');
stepNumber--;
if (stepNumber < 1) {
$(this).hide();
}
if (stepNumber < appStepsTotal - 1) {
$('#next').show();
$('.submit-btn').hide();
}
});
})
</script>
<script>
$(function () {
document.getElementById("sa").style.color = "#53AA8E";
})
</script>