<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="minorinformation" >
<div class="boxes">
<h3>STEP 2<br><br>FILL OUT MINOR INFORMATION</h3>
<div>
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<h4 class="control-label" for="field1">Minor Information:</h4>
<div class="controls" id="profs">
<div id="minorInfo">
<div class="minorSelect">
<div class="form-group col-lg-5">
<input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" required>
</div>
<div class="form-group col-lg-2">
<input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1" required>
</div>
<div class="form-group col-lg-5">
<input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" required>
</div>
<div class="form-group">
<input class="form-control date-picker txtMinorDate1" id="txtMinorDate1" name="minorDate1" data-toggle="datepicker" required>
</div>
<br><button id="b1" class="btn add-more" type="button">Add Minor</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@charset "utf-8";
/* CSS Document */
body{
background:none repeat scroll 0 0 #000000;
margin: 25px;
padding: 0px;
color: white;
background-color:#000;
}
h1{
color:#fff;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Responsive {
width: 90%;
height: 100%;
min-width: 200px;
max-width: 900px;
padding: 0px;
}
.InfoWrapper {
background: #ffffff;
border:5px solid #FF29EA;
border-radius: 20px;
font-weight: bold;
font-size: 135%;
color: #000000;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 10px;
}
[id^=txtMinorDate] {
border-radius: 5px;
text-align: center;
margin: 10px;
height: 40px;
font-size: 14pt;
width:100%;
max-width:200px;
}
.add-more {
margin-top: 10px;
color:#fff;
}
.remove-me {
margin-left:5px;
}
.date-picker {
width:100%;
max-width:200px;
text-align:center;
font-size:1.4em;
}
#signatureadult > canvas, #signature > canvas {
background-color:#fff;
}
#startWiaver {
font-size: 34px !important;
padding: 10px !important;
width: 100% !important;
max-width: 400px;
}
/* #nameval > div:nth-child(6) > button, #nameval > div:nth-child(7) > button, #nameval > div:nth-child(8) > button {
background:#E10F78;
color:#fff;
}*/
input[type="button"], input[type="submit"], button, #clearButtonadult, #clearButtonminor, .btn{
margin-bottom: 15px !important;
background: #E10F78;
color: #fff;
font-family: Sans-serif;
font-size: 1.4em;
/*height: 60px;*/
/*width: 100%;*/
/*max-width: 180px;*/
/*line-height: 60px;*/
margin: 0px 10px;
text-align: center;
border: 0;
transition: all 0.3s ease 0s;
border-radius: 5px;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover, .btn:hover {
/*background: #ff655a;*/ /*Change button color animation*/
/*box-shadow: inset 0 0 0 3px #1f53a5;*/ /*Inset Border Animation*/
-webkit-transform: scale(1.3); /*Grow Animation*/
-ms-transform: scale(1.3);
transform: scale(1.3);
/*-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8); /*Shrink Animation*/
}
#nextWaiver {
font-size: 34px !important;
padding: 10px !important;
width: 100% !important;
}
.boxes {
background: gainsboro;
border: 5px;
border-style: solid;
border-radius: 20px;
}
/*<!-----------------------------------------textboxes-------------------------------------->*/
input[type="text"], input[type="email"], input[type="date"], select {
border-radius:5px;
text-align:center;
height:40px;
font-size:14pt;
width:95%
}
input[type="checkbox"] {
width:30px;
height:17px;
position:inherit !important;
}
/*-------------------------------------------Input Fields------------------------------------*/
#minorinformation > div.boxes > div > div.select > select {
width:65px;
}
#form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(2), #form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(3), #form1 > div.boxes > div > form:nth-child(2) > input[type="text"]:nth-child(4), #holder > div > form:nth-child(2) > input[type="text"]:nth-child(3) {
width:50px;
}
/* #contactadult > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(3), #contactminor > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(4) {
width:95px;
}*/
#contactadult > div.boxes > form:nth-child(5) > input[type="text"]:nth-child(2) {
width:105px;
}
/*#contactadult > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(2), #contactminor > div.boxes > form:nth-child(4) > input[type="text"]:nth-child(3) {
width:75px;
}*/
#termsadult > div > div > div:nth-child(9) > form > input[type="text"], #terms > div > div > div:nth-child(9) > form > input[type="text"] {
width:95px;
}
#conval > input[type="text"]:nth-child(2), #contactminor > div.boxes > input[type="text"], #contactminor > div.boxes > form:nth-child(3) > input[type="text"], {
width: 100% !important;
max-width: 630px !important;
}
#conval > input[type="text"]:nth-child(2) {
width:100%;
max-width:715px;
}
#txtEmailAddress, #txtminoremail {
max-width:395px;
width:90%;
}
#txtaddress, #txtminoraddress {
width:90%;
}
/*--------------------------------------------JQ Validate Error--------------------------------------*/
select.error, textarea.error, input.error {
border: 2px #ff0000;
border-style: solid;
}
#txtFirstName-error, #txtLastName-error, #dob_year-error, #Address-error, #City-error, #State\2f Province-error, #txtPostalCode-error, #txtPhoneNumber-error, #txtEmailAddress-error {
background-color: #ef6666;
color: #fff;
border-radius: 5px;
z-index: -1;
box-shadow: 5px 5px 5px #888888;
}
/*-----------------------------------------Bootstrap Validation--------------------------------------------*/
.form-group {
&.has-error {
padding: 10px;
background:
/* On "top" */
repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
pink 10px,
pink 20px
),
/* on "bottom" */
linear-gradient(
to bottom,
lightpink,
lightpink
);
}
}
$(document).ready(function(){
var next = 1;
$(".add-more").click(function(e){
e.preventDefault();
var addto = "#txtMinorFirst, #txtMinorMiddle, #txtMinorLast, #txtMinorDate" + (next);
var addRemove = "#txtMinorFirst, #txtMinorMiddle, #txtMinorLast, #txtMinorDate" + (next);
next = next + 1;
var newIn = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' + next + '" type="text" name="minorFirst' + next + '" placeholder="First Name" class="form-control" data-minlength="2" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' + next + '" type="text" name="minorMiddle' + next + '" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' + next + '" type="text" name="minorLast' + next + '" placeholder="Last Name" class="form-control" data-minlength="2" required></div><div class="form-group"><input class="form-control date-picker txtMinorDate' + next + '" id="txtMinorDate' + next + '" name="minorDate' + next + '" data-toggle="datepicker" required></div></div>';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove Minor</button><div id="minorInfo"></div>';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#txtMinorFirst, #txtMinorMiddle, #txtMinorLast, #txtMinorDate" + (next)).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldFirst = "#txtMinorFirst" + (fieldNum);
var fieldMiddle = "#txtMinorMiddle" + (fieldNum);
var fieldLast = "#txtMinorLast" + (fieldNum);
var fieldDate = "#txtMinorDate" + (fieldNum);
$(this).remove();
$(fieldFirst).remove();
$(fieldMiddle).remove();
$(fieldLast).remove();
$(fieldDate).remove();
});
$('.add-more').prop('disabled', next > 9);
$('[data-toggle="datepicker"]').datepicker({
format: 'yyyy-mm-dd',
type: '2'
});
});
});
