"waiver new add and remove"
Bootstrap 3.0.0 Snippet by squidrat

<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> <strong>Flying Squirrel Customer Waiver, Release of Liability, Indemnity and Assumption of Risk Agreement</strong><br> <br> <div style="height:200px;width:100%;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto; background:white; padding:10px; max-width:900px;">In consideration of being permitted by HAMILTON TRAMPOLINE, ULC, doing business as “FLYING SQUIRREL”, to participate in its activities and to use its equipment and facilities, now and in the future, I hereby agree to <strong>release, indemnify and forever discharge</strong> FLYING SQUIRREL, its agents, owners, members, shareholders, officers, directors, managers, partners, employees, volunteers, manufacturers, participants, lessors, affiliates, its subsidiaries, related and affiliated entities, successors and assigns (the “RELEASED PARTIES”), on behalf of myself, my spouse, my child(ren), my parent(s), my heir(s), assign(s), personal representative(s) and estate as follows: I acknowledge that my participation in the activities provided at FLYING SQUIRREL’S trampoline and entertainment facility entails known and unknown risks that could result in physical or emotional injury, paralysis, death, or damage to myself, to property or to third parties. I understand that such risks simply cannot be eliminated without jeopardizing the essential qualities of the activity. <strong>The risks include, among other things and without limitation:</strong> exposure of participants to the risk of cuts and bruises, sprained or broken wrists and ankles, concussions, dislocations, head/neck injuries, and in some cases more serious injuries, including paralysis or death. Traveling to and from trampoline locations raises the possibility of any manner of transportation accidents. Double bouncing (more than one person per trampoline) can create a rebound effect causing serious injury. Flipping and running and bouncing off the walls is dangerous and can cause serious injury, and must be done at the participants own risk. Similar risks are also inherent in using the Foam Pits, Dunking Hoops, Slack Line, Ninja Course, Rope Swing and any other attractions and/or devices present at the facility. In any event, if you or your child is injured, you or your child may require medical assistance, at your own, sole expense. Furthermore, FLYING SQUIRREL employees have difficult jobs to perform. They strive for the highest standards of safety, but they are not infallible. They might be unaware of a participant’s fitness or abilities. They may give incomplete warnings or instructions, and the equipment being used might become loose, out of adjustment, or malfunction. There is also a risk that FLYING SQUIRREL employees may be negligent in, among other things, monitoring and supervising use of its equipment and facilities and in the maintenance and repair of its equipment and facilities. I expressly agree and promise to voluntarily accept and assume all of the risks existing in the activities present at FLYING SQUIRREL. My participation in these activities is purely voluntary, and I elect to participate in spite of all known, and unknown risks. <strong>I hereby voluntarily release, forever discharge, and agree to defend, indemnify and hold harmless RELEASED PARTIES from any and all claims, demands, or causes of action, which are in any way connected with my participation in this activity or my use of FLYING SQUIRREL’S equipment or facilities, including any such claims which allege negligent acts or omissions of RELEASED PARTIES.</strong> Should FLYING SQUIRREL or anyone acting on their behalf, be required to incur attorney’s fees and costs to enforce this agreement, I agree to indemnify and hold them harmless for all such fees and costs. This means that I will pay all of those attorney’s fees and costs myself. I certify that I have adequate insurance to cover any injury or damage that I may cause or suffer while participating in the activities present at FLYING SQUIRREL, or else I agree to bear the costs of such injury or damage myself. I further certify that I am willing to assume the risk of any medical or physical condition that I may have, pre- existing or otherwise. In the event that I file a lawsuit against FLYING SQUIRREL for any reason, I agree to do so solely in the Province of Alberta and I further agree that the substantive law of Alberta shall apply in that action without regard to the conflict of the law rules of that Province. I agree that if any portion of this agreement is found to be void or unenforceable, the remaining portions shall remain in full force and effect. I agree as an adult participant, or the Parent/Legal Guardian of a minor participant, in consideration of being permitted to participate at FLYING SQUIRREL, grant FLYING SQUIRREL, and all RELEASED PARTIES, the irrevocable right and permission to photograph and/or record me or my child(ren)/ward(s) in connection with FLYING SQUIRREL to use the photograph and/or recording for all purposes, including advertising and promotional purposes, in any manner in any and all media now or hereafter known, in perpetuity throughout the world, without restriction as to alteration. I waive any right to inspect or approve the use of the photograph and/or recording, and acknowledge and agree that the rights granted to this release are without compensation of any kind. All photographs and/or recordings are the exclusive property of FLYING SQUIRREL. <strong> If the participant is a minor, I agree that this Waiver, Release of Liability, Indemnity and Assumption of Risk Agreement (this “RELEASE”) is made on behalf of that minor participant and that all of the releases, waivers and promises herein are binding on that minor participant. I represent that I have full authority as Parent or Legal Guardian of the minor participant to bind the minor participant to this Release. </strong> <strong> If the participant is a minor, I further agree to defend, indemnify and hold harmless FLYING SQUIRREL from any and all claims or suits for personal injury, property damage or otherwise </strong> which are brought by, or on behalf of the minor, and which are in any way connected with such use or participation by the minor, including injuries or damages caused by the negligence of RELEASED PARTIES, except injuries or damages caused by the gross negligence or willful misconduct of the party seeking indemnity. I confirm that I have not consumed any alcohol, drugs, or participated in any other activity which might impair my ability to safely participate in the activity prior to or during the course of my partaking in any of the activities located at FLYING SQUIRREL’S facility. I confirm that I have had sufficient time to read and understand this Release in its entirety. I understand that this Release represents the entire agreement between myself and FLYING SQUIRREL (and the RELEASED PARTIES), and is binding on myself and anyone claiming through or under me. I on my own behalf am executing this Release freely and voluntarily without any compulsion on the part of FLYING SQUIRREL or any of the RELEASED PARTIES. In consideration of not being required to sign a new copy of this RELEASE before each visit, I further agree that <strong> this RELEASE shall apply to all future visits by me and by the minor participant until he/she is 18 years old in full, including all provisions of this Agreement. </strong> By signing this document, I acknowledge that if anyone is hurt or property damaged during my participation in any of the FLYING SQUIRREL activities, I may be found by a court of law to have waived my or the minor participant’s right to maintain a lawsuit against FLYING SQUIRREL or any RELEASED PARTIES on the basis of any claim from which I have released them herein. I have had sufficient opportunity to read this entire document. <strong> I have read and understood it, and I agree to be bound by its terms.</strong></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; } .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---------------------------------------- --> function showonlyone(thechosenone) { $('.adultboxes').each(function (index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); } <!-- ----------------------------Minor Form Buttons---------------------------------------- --> function toggleDiv(divID) { $("#" + divID).toggle(200); } <!-- ----------------------------add more minors---------------------------------------- --> 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><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(); }

Related: See More


Questions / Comments: