"waiver form 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 ----------> <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' }); }); });

Related: See More


Questions / Comments: