<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 ---------->
<form id="guardval" method="post" action="https://static.test.idealss.net/waiver-test/display.html">
<div class="adultboxes" id="form2" class="answer_list">
<div class="boxes">
<h3>STEP 1<br><br>PARENT OR GUARDIAN PERSONAL INFORMATION</h3>
<div>
<h4>Guardian Name:</h4>
<div class="form-group col-lg-6">
<input id="txtGuardFirst" type="text" name="First Name" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<div class="form-group col-lg-6">
<input id="txtGuardLast" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<h4>Birthdate</h4>
<!-- <div class="date-dropdowns form-group">
<input class="form-control date-picker" id="txtGuardAge" name="txtGuardAge" data-toggle="datepicker" required>
</div>-->
<div class="form-group date-dropdowns col-lg-4">
<select name="month" id="txtGuardMonth" data-validation="required" required>
<option value=""> - Month - </option>
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtGuardDay" data-validation="required" required>
<option value=""> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="yearpicker"id="txtGuardYear" data-validation="required" required>
<option value=""> - Year - </option>
</select>
<script>
for (i = new Date().getFullYear(); i > 1900; i--)
{
$('#txtGuardYear').append($('<option />').val(i).html(i));
}
</script>
</div>
<div style="padding:10px;">
<input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('minorinformation');"/>
</div>
</div>
</div>
</div>
<!-- ---------------------------------------Minor Information------------------------------------ -->
<div id="minorinformation" style="display:none;">
<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 id="minor_fields"></div>
<div class="controls" id="profs">
<div id="minorInfo">
<div class="form-group col-lg-5">
<input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" 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">
</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" data-validation="required" required>
</div>
<!-- <div class="form-group">
<input class="form-control date-picker txtMinorDate1" id="txtMinorDate1" name="minorDate1" data-toggle="datepicker" required>
</div><br> -->
<div class="" id="">
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtMinorMonth1" data-validation="required" required>
<option value=""> - Month - </option>
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="day" id="txtMinorDay1" data-validation="required" required>
<option value=""> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="form-group date-dropdowns col-lg-4">
<select name="yearpicker"id="txtMinorYear1" data-validation="required" required>
<option value=""> - Year - </option>
</select>
<script>
for (i = new Date().getFullYear(); i > 1900; i--)
{
$("#txtMinorYear1").append($("<option />").val(i).html(i));
}
</script>
</div>
</div>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
</div>
</div>
</div>
</div>
<div style="padding:10px;">
<input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('contactminor');"/>
</div>
</div>
</div>
<!-- -----------------------------------------End Minor Information------------------------------ -->
<div id="contactminor" style="display:none;">
<div class="boxes">
<h3>STEP 3<br><br>PARENT OR GUARDIAN CONTACT INFORMATION</h3>
<p>Adult Contact Information</p>
<h4>Address:</h4>
<div class="form-group">
<input id="txtGuardAddress" type="text" name="Address" placeholder="Address" class="form-control" data-validation="required" required>
</div>
<h4>City:</h4>
<div class="form-group col-lg-4">
<input id="txtGuardCity" type="text" name="City" placeholder="City" class="form-control" data-validation="required" required>
</div>
<div class="form-group col-lg-4">
<input id="txtGuardState" type="text" name="State/Province" placeholder="Province" class="form-control" data-minlength="2" data-validation="required" required>
</div>
<div class="form-group col-lg-4">
<input id="txtGuardZip" type="text" name="Postal Code" placeholder="Postal Code" class="form-control" data-minlength="6" data-validation="required" required>
</div>
<h4>Contact:</h4>
<div class="form-group col-lg-6">
<input id="txtGuardPhone" type="text" name="Phone Number" placeholder="Phone Number" class="form-control" pattern="[0-9]{1,}" data-validation="required" required>
</div>
<div class="form-group col-lg-6">
<input id="txtGuardEmail" type="email" name="Email" placeholder="Email" class="form-control" data-validation="email">
</div>
<div style="padding:10px;"><input class="nxtBtn" type="button" name="adult" value="Next" onclick="javascript:toggleDiv('terms');"
/></div>
</div>
<!-- -----------------------------------End Adult + Minor Form----------------------------------- -->
<div id="terms" style="display:none;">
<div class="boxes">
<h3>STEP 4<br><br>TERMS AND CONDITIONS AGREEMENT</h3>
<div>
<p>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="txtGuardAgree" class="" data-validation="required" data-validation-error-msg="You must agree to our terms" required>I have read and agree to the terms above.
</label>
</div>
</div>
<p>Please sign below to verify the above is correct to the best of your knowledge</p>
<div id="txtGuardSignature" class="sig"></div>
<div style="padding:10px;"><button type="button" id="clearButtonminor" onclick="$('#txtGuardSignature').jSignature('clear')">Clear Signature</button></div>
<div style="padding:10px;"><input class="btnSubmit" type="submit" id="btnMinor" name="submit" value="Submit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
@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;
}
[id^=txtMinorMonth] {
border-radius: 5px;
text-align: center;
margin: 10px;
height: 40px;
font-size: 14pt;
width:100%;
max-width:200px;
}
[id^=txtMinorDay] {
border-radius: 5px;
text-align: center;
margin: 10px;
height: 40px;
font-size: 14pt;
width:100%;
max-width:200px;
}
[id^=txtMinorYear] {
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
);
}
}
<!-- ----------------------------Adult Form Buttons---------------------------------------- -->
<script>
function showonlyone(thechosenone) {
$('.adultboxes').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
</script>
<!-- ----------------------------Minor Form Buttons---------------------------------------- -->
<script>
function toggleDiv(divID) {
$("#" + divID).toggle(200);
}
</script>
<!-- ----------------------------add more minors---------------------------------------- -->
<script>
var child = 1;
function minor_fields() {
child++;
var objTo = document.getElementById('minor_fields')
var divminors = document.createElement("div");
divminors.setAttribute("class", "form-group removeclass"+child);
var rdiv = 'removeclass'+child;
divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
child + '" type="text" name="minorFirst' + child +
'" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
child + '" type="text" name="minorMiddle' + child +
'" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
child + '" type="text" name="minorLast' + child +
'" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
'" data-validation="required" required><option value=""> - Year - </option></select><script>for (i = new Date().getFullYear(); i > 1900; i--){$("#txtMinorYear' + child+'").append($("<option />").val(i).html(i));}<\/script></div></div><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields('+ child +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';
objTo.appendChild(divminors)
}
function remove_minor_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
