Innovative Activities Grant Application

by Stephen Lujan

HTML

<link rel="stylesheet" href="//assets.acs.org/v2.0/acs-bootstrap/css/acs-bootstrap.css">
<link rel="stylesheet" href="//assets.acs.org/v2.0/cq5/css/main.css">
<link rel="stylesheet" href="//assets.acs.org/v2.0/cq5/css/responsive.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="alert alert-danger">
     <h4> Missing Required Information</h4>

    <label for="projectTitle">Project Title</label>
    <label for="totalProposedExpenses">Total Proposed Expenses</label>
</div>
<form id="grantForm" class="grant-form">
    <fieldset id="generalInformation">
        <legend>General Information</legend>
        <div class="row-fluid control-group">
            <div class="span3">
                <label for="projectTitle" class="require">Project Title</label>
            </div>
            <div class="span9 controls">
                <input id="projectTitle" type="text" placeholder="enter text..." required/>
            </div>
        </div>
        <div class="row-fluid control-group">
            <div class="span3">
                <label for="projectGoal" class="require">Project Goal</label>
            </div>
            <div class="span9 controls">
                <input id="projectGoal" type="text" placeholder="enter text..." required/>
            </div>
        </div>
        <div class="row-fluid control-group">
            <div class="span3">
                <label for="facultyMembersParticipating" class="require">Number of Faculty Members Participating</label>
            </div>
            <div class="span9 controls">
                <input id="facultyMembersParticipating" type="number" min="0" placeholder="0" required/>
            </div>
        </div>
        <div class="row-fluid control-group">
            <div class="span3">
                <label for="chapterMembersParticipating" class="require">Number of Chapter Members Participating</label>
            </div>
            <div class="span9...

CSS

label {
    margin-top: 5px;
}
.grant-form input {
    width: 95%;
}
.alert {
    margin: 1em;
}
.field-header {
    font-weight: bold;
}
label.require::after {
    color: #e32;
    content:' *';
    display: inline;
}
th {
    font-weight: bold;
    min-width:10em;
}
table {
    width: 100%;
}
.grayHeaders th {
    background-color: #CCC;
}
body {
    /*font-family: helvetica;*/
}
fieldset {
    border-radius: 10px;
    margin: 1em;
    padding: 1.0em 2.0em 1.0em 2.0em;
    position: relative;
    border: 3px solid #797979;
}
legend {
    position: relative;
    top: -0.5 em;
    color: #fff;
    background-color: #2A6FBA;
    margin: 0;
    padding: 0.5em 1.0em;
    /*border: 1px solid black;*/
    border-radius: 10px;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .3), inset 0 5px 5px rgba(0, 0, 0, .3), inset 5px 0px 5px rgba(0, 0, 0, .3), inset -5px 0px 5px rgba(0, 0, 0, .3);
    text-shadow: 0px 0px 1px #fff;
    /*smooth text*/
    /*0.1em 0.1em 0.2em rgba(0, 0, 0, .3);*/
    font-weight: bold;
    letter-spacing:0.05em;
    width: auto;
    min-width: 10em;
}
.sectionFooter {
    font-size: 0.9em;
}
/* ------------------ */

/* search modal */
 .name {
    font-weight: bold;
}
.city {
    margin-left: auto;
    margin-right: auto;
}
#chapterSearchList {
    list-style-type: none;
}
#chapterSearchList li {
    list-style-type: none;
    margin: 2px;
    padding: 3px;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#chapterSearchList div {
    display: inline;
}
/* end search modal */

/* ------------------ */

JavaScript

//=========================================
//Student director search modal
//-----------------------------------------
$('#chapterSearch').keyup(function () {
    var valThis = $(this).val().toLowerCase();
    $('#chapterSearchList>li').each(function () {
        var text = $(this).children(".name").text().toLowerCase();
        (text.indexOf(valThis) != -1) ? $(this).show() : $(this).hide();
    });
});
$('#chapterSearchList>li').each(function () {
    var name = $(this).children(".name").text();
    var select = $(this).children("button").click(function () {
        //$('#studentDirectorButton').html(name);
        addStudentDirector(name);
    });
});
//=========================================
//Add and Remove to student director list 
//-----------------------------------------

var additionalStudentDirectorRowHtml = '\
    <div class="row-fluid control-group">\
            <div class="span3">\
                <label for="studentDirectorButton">Student Director</label>\
            </div>\
            <div class="span9 controls"> <a id="studentDirectorButton" href="#studentDirectorModal" role="button" class="btn" data-toggle="modal">Search</a> Only one student director is required.\
            </div>\
        </div>';
var studentDirectorButtonHtml = '<a id="studentDirectorButton" href="#studentDirectorModal"\ role="button" class="btn" data-toggle="modal">Search</a>';

//wire up the remove links from a static element so that dynamically added remove links still work
$("#generalInformation").on('click', '.removeDirectorLink', removeStudentDirector);
var studentDirectorTotal = 0;

function removeStudentDirector() {
    var linkElement = $(this);
    var rowElement = linkElement.parent().parent();
    if (rowElement.attr('id') != "studentDirectorRow") {
        console.debug("removing student director");
        rowElement.remove();
    } else if (studentDirectorTotal > 1) {
        console.debug("removing top student director");
        //move up student...