Overlay in sidebar but only for one section? - javascript

right now I am having a problem. I have created a calculater by myself. Check it out here: https://radlvoo.de/typ/mtb-fully/ (Last element in the sidebar).
If you select some values and click on the button, the overlay shows up but wrong.. the overlay is going over all the sidebar content. But I just want to have to overlay over the last element, the calculator. How can I do this?
This is my form code so far:
<form class="filterform" id="sidebarRahmenhoehenrechner">
<div class="form-group"><label class="control-label">FAHRRADTYP</label>
<select id="fahrradtypHöhenrechner" class="form-control" name="typ">
<option value="">Bitte wählen…</option>
<option value="trekkingrad">TREKKINGRAD</option>
<option value="cityrad">CITYRAD</option>
<option value="mountainbike hardtail">MOUNTAINBIKE HARDTAIL</option>
<option value="mointainbike fully">MOUNTAINBIKE FULLY</option>
<option value="crossrad">CROSSRAD</option>
<option value="rennrad">RENNRAD</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">GESCHLECHT</label>
<select id="geschlechtHöhenrechner" class="form-control" name="geschlecht">
<option value="">Bitte wählen…</option>
<option value="damen">DAMEN</option>
<option value="herren">HERREN</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">FAHRSTYLE</label>
<input name="fahrstyle" type="radio" value="sportlich" /> Sportlich orientiert
<input name="fahrstyle" type="radio" value="touren" /> Touren orientiert
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">SCHRITTHÖHE</label>
<input id="schritthöheInput" min="0" name="schritthöhe" type="number" />
<div class="clearfix"></div>
</div>
<div class="form-group form-group-block" style="margin-top: 20px;"><button id="rahmenhöhenRechnerButton" onclick="rahmenhöhenRechnerMain();" type="button">Rahmenhöhe berechnen</button></div>
<div class="clearfix"></div>
<div id="rahmenhöhenRechnerOverlay" style="position: absolute; display: none; z-index: 500; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.75); overflow: auto;"><div onclick="disableOverlay();" id="closeButtonOverlay">✖</div><div><p id="rahmenhöheAnzeigen"></p></div></div>
<div></div>
</div>
</form>
And this is the overlay code doing:
function disableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "none";
}
function enableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "block";
}
Kind regards

Related

How to show user all values selected after multi-step form

I am making a multistep form for a user to book a reservation. This form will let the user choose a few options at a time before submitting the form values to the database. I currently have the multistep form working through JS. I want to show all the values selected to the user one final time in the last ".input-group" Div labeled "Registration Confirm", and at this location they can submit the reservation after reviewing it is all correct. I am stuck on getting the final values to all show up in the last section however. I am aware the form is not done to be submitted to the database, I am trying to figure out how to show all the values before I go any further and do not mind if it is JS or Jquery.
I have tried saving the values to sessionStorage using this method for each option however it will not work. Dev tools is also telling me that no issues are arrising when I used this method so I am a bit stuck as nothing is showing up in the final div.
const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;
form.html
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="destination-choice select" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="room-choice select" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" id="result-checkin" />
<input type="date" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="guestNumber select" id="guestNumber" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
form.js
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
form.css
/* Progress Bar Start */
.progressbar {
position: relative;
display: flex;
justify-content: space-around;
counter-reset: step;
margin: 0.5rem 0rem 0.5rem;
width: 50%;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.5rem;
height: 2.5rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--highlight-yellow);
color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
display: none;
transform-origin: top;
animation: animate .5s;
}
label {
color: var(--wei);
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
/* Form End */
.registerForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#registrationTitle {
margin-top: 10px;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight-yellow);
font-family: var(--font-family-ubuntu);
font-weight: 400;
}
/* Buttons Start */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
font-size: var(--font-size-20);
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--background-grey);
color: var(--background-blue);
text-align: center;
border-radius: 0.25rem;
border-color: var(--text-color);
border-style: solid;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 0 2px var(--highlight-yellow), 0 0 0 2px var(--highlight-yellow);
border-color: var(--background-blue);
color: var(--background-blue);
-webkit-text-stroke: .5px var(--highlight-yellow);
}
/* Buttons End */
Any help is appreciated. Thank you!
Here you go :
HTML :
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />
<input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" class="user_change" data-name="choiceName" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" class="user_change" data-name="choicePhone" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" class="user_change" data-name="choiceEmail" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="user_change guestNumber select" id="guestNumber" data-name="choiceGuests" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" class="user_change" data-name="choiceAmenities" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
Additional JS to Your JS :
// My Stuff
// Create an Empty Object
var the_data_obj = {};
// On change of input elements to update the object
$(".user_change").change(function(){
var changed_field = $(this).attr("data-name");
var changed_field_val = $(this).val();
the_data_obj[changed_field] = changed_field_val;
// Finally view the added stuff
$("#"+changed_field).text(changed_field_val);
console.log(the_data_obj);
});
What did i do..?
Added a new class user_change to every input you have there..
Added a new data attribute data-name to every input you have there..
Created a new Object.
On change of every input by user parsing the input field key by data-name and input field value by parsed data atrr.
Updated the same in new created Obj.
Printing the same value in the final div.
Here's the working JSFiddle for the same :
Ping me if you come across any issue.

print the selected area in a web page of laravel through javascript or css

i have a page of reporting which contents navs headers and footers now i want to print the table and 4 fields which i put in a same div named printme
<div id="printme">
<div class="card-body">
<div class="form-group">
<div class="row">
<div class="form-group col-sm-3">
<label for="report_type">Type</label>
<select class="form-control" name="report_type" id="report_type">
<option value="">Report Type</option>
<option value="product wise">Product Wise</option>
<option value="salesman wise">Salesman Wise</option>
<option value="orderbooker wise">OrderBooker Wise</option>
<option value="vendor wise">Vendor Wise</option>
<option value="client wise">Client Wise</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="resource_name">Resource Name</label>
<select class="form-control" name="resource_name" id="resource_name">
<option value="">Name
</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="from_date">From Date</label>
<input class="form-control" type="date" placeholder="From Date" name="from_date" id="from_date" /required>
</div>
<div class="form-group col-sm-3">
<label for="to_date">To Date</label>
<input class="form-control" type="date" placeholder="To Date" name="to_date" id="to_date" /required>
</div>
<!-- /.row-->
</div>
<div>
<table class="table table-responsive-sm table-bordered table-striped table-sm" id="report_table">
<thead id="head">
</thead>
<tbody id="body">
</tbody>
</table>
</div>
</div>
</div>
</div>
its javascript code is here
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
this function triggers on a button but doing with this method it erases the data of four fields at the top
<button class="btn btn-sm btn-danger" onclick="printDiv('printme')"> Print Report</button>
i only want the print of Report Type
Resource Name
from Date
To date[full page
also tried this through CSS but is not working
#printme {
display: none;
}
#media print {
.no-printme {
display: none;
}
#printme {
display: block;
}
}
anyone please help to print the table and four fields at the top in a page
just come to a solution that laravel has its on style.css file in view/css go there and find #media print you will get
#media print {
.d-print-none {
display: none !important;}
.d-print-inline {
display: inline !important;}
.d-print-inline-block {
display: inline-block !important;}
.d-print-block {
display: block !important;}
.d-print-table {
display: table !important;}
.d-print-table-row {
display: table-row !important;}
.d-print-table-cell {
display: table-cell !important;}
.d-print-flex
display: -ms-flexbox !important;
display: flex !important; }
.d-print-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;}}
now hide the elements by using class ="d-print-none" in tag attributes and you are done
other d-print options are also available for display in print you can try it

Add a linked select box to sign up form

I have a sign up form and I want to add 2 linked select box to the form, the linked select box code works find separatly but when I try to add it into the form it doesn't show up.
I tried to add the code into a div under the password block but didn't work for me
EDIT: so we figured out that the problem isn't with the code but is something that i'm doing wrong with the Angular. when I open the project (in visual studio code) that includes the html,TS,CSS the select box won't show up. when we tried to run it not as an angular project and without the TS the select box did show up. can someone help me?
This is the linked select box:
<script>
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
</script>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
And this is the main sign up form:
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>
Hope to get some help with that
I added your linked select boxes to the form under password. It works fine. What specific problem or error message age you getting?
Update: added your css. It's not causing the problem. Try disabling your TS file and see if the code works
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
#panel {
background-color: #ffffff;
}
#signupbtn {
float: right;
margin-right: 10px;
background-color: #64b5f6;
font-weight: 500;
}
#title {
background-color: #64b5f6;
color: white;
padding: 8px;
margin-top: 0px;
font-weight: 700;
text-align: center;
}
form {
padding: 0px;
border-radius: 3px;
box-sizing: border-box;
margin: 0px 20px 0px 20px;
}
.error {
color: red;
}
.indeterminate {
background-color: #64b5f6 !important;
}
.input-field {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
#errorMsg {
background: #f6b2b5;
width: 100%;
height: 50px;
text-align: center;
}
#errorMsg span {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
position: relative;
float: left;
font-size: 15px;
}
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<div>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>

Enable disabled dropdown with onclick

I have a disabled drop down that I only want enabled after it has been clicked. I have tried several methods, the following being the latest incarnation that doesn't work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<div>
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</div>
$(function() {
$('div > div').on('click', function(event) {
$(this).hide().prev('select:disabled').removeAttr('disabled').focus();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="myForm">
<div style="display:inline-block; position:relative;">
<select name="test" id="testing" disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</form>
</body>
</html>
This will detect the click on it by using CSS to add a layer over the select, but it still is not the best since it still requires more action from the user to open up the options. So it is basically a double click.
var elem = document.querySelector('span.cover');
function listener () {
elem.classList.remove('active');
elem.removeEventListener('mousedown', listener)
var sel = elem.querySelector('select');
sel.removeAttribute('disabled');
sel.focus();
}
elem.addEventListener('mousedown', listener)
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
If you want to do it with jQuery
$(document).on('click','span.active', function(){
$(this).removeClass('active').find('select').removeAttr('disabled');
})
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
<span class="cover active">
<select name="test" id='testing2' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>

What is the right way to repeat html controls with a delete

I am trying to make a repeater html textbox controls which will add another field under it with a delete btn. The "+add more" working fine but the delete btn also adding more controls under it.
I want to know the right way to achieve it.
$(function() {
$('.btn-add-phone').click(function() {
var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).append(sInputGroupPhoneHtml);
});
$('.btn-add-email').click(function() {
var sInputGroupEmailHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Personal">Personal</option><option value="Other">Other</option></select><span class="input-group-addon input-group-email-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).append(sInputGroupEmailHtml);
});
$('.input-group-email-remove').click(function() {
$(this).parent().remove();
});
jQuery(".toggleControlsPhone a").click(function() {
jQuery(".showPhoneControls").toggle();
});
jQuery(".toggleControlsEmail a").click(function() {
jQuery(".showEmailControls").toggle();
});
});
div.input-group-option:last-child input.form-control {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.input-group-option span.input-group-addon-remove {
cursor: pointer;
}
div.input-group-option {
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="phoneAddMore">
<label class="control-label">Phone</label>
<div class="form-group form-group-options">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
<select class="form-control" style="width:50%">
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Other">Other</option>
</select>
</div>
<a hre="#" class="btn-add-phone">+ add more </a>
</div>
<div class="clearfix"></div>
</div>
View on JSFiddle
I see two issues:
When you append sInputGroupEmailHtml, you're appending it to the <a> tag that was clicked. So, clicking anywhere inside those elements will bubble up to the <a> tag and fire the event to add a new group. I've changed it to append to the <a> tag's parent .form-group (outside of and after the <a> tag), instead.
When you bind a click handler to .input-group-email-remove, that element does not yet exist in the DOM. (It's only added when you click the "Add More" button.) I've used event delegation to bind the handler to #addPhoneMore rather than the button itself, so that the handler will fire even on dynamically generated children. I'm also using closest() to find the .form-group of the clicked button. See Event binding on dynamically created elements.
$(function() {
$('.btn-add-phone').click(function() {
var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).parent().append(sInputGroupPhoneHtml);
});
$('#phoneAddMore').on('click', '.input-group-phone-remove', function() {
$(this).closest('.form-group').remove();
});
});
div.input-group-option:last-child input.form-control {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.input-group-option span.input-group-addon-remove {
cursor: pointer;
}
div.input-group-option {
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="phoneAddMore">
<label class="control-label">Phone</label>
<div class="form-group form-group-options">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
<select class="form-control" style="width:50%">
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Other">Other</option>
</select>
</div>
<a hre="#" class="btn-add-phone">+ add more </a>
</div>
<div class="clearfix"></div>
</div>

Categories