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.
Related
I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});
I want to make clonable form fields that get wrapped in to the div. I am able to clone the element but the problem is if I have multiple groups of similar fields, it is adding fields to all other groups regardless instead of only to the group for the button I clicked.
How can I clone fields only for the current $(this) element and not for others?
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
The issue is due to the .appendTo('.gs-customer-form-group') call. This appends the cloned content in to every .gs-customer-form-group element. You need to only append to the one related to the clicked span. You already have a reference to that element from siblings(), so you can put it in a variable for use later:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
let $group = $(this).parent().siblings('.gs-customer-form-group');
$group.children().last().clone().appendTo($group);
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
You can do it like this:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event){
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));
});
.gs-customer-field-box{
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group{
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel{
color: red;
cursor: pointer;
}
.btnAdd{
color: green;
cursor: pointer;
}
.active{
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr />
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
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>
I have a simple date range search form with a "advanced options" dropdown using bootstrap. My problem is that when the user presses the submit button while the advanced dropdown is shown it has different behaviour across different browsers.
In IE the dropdown closes and form will get submitted. In Chrome, the dropdown closes but I have to click the submit button a second time to get the form to submit.
If I intercept the button click event and submit manually then I can get away with one click in Chrome, but then the form submits twice in IE.
Is there any way to get a consistent behaviour across both browsers?
https://jsfiddle.net/joeykruger75/bv8dshu8/
$('#date-range-box').daterangepicker({
"startDate": "07/14/2017",
"endDate": "07/20/2017"
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
$('#search-form').submit(function(ev) {
ev.preventDefault();
showMsg('submitted');
});
function showMsg(msg) {
var options = {
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
year: "numeric",
month: "2-digit",
useGrouping: "false"
};
var dateS = new Date().toLocaleString('en-GB', options);
toastr.options.positionClass = "toast-bottom-right";
toastr.info(msg + ' - ' + dateS, {
"positionClass": "toast-bottom-right",
});
}
body {
padding-top: 50px;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 768px) {
#adv-search {
width: 400px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 400px;
}
}
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<form name="myform" id="search-form" class="form-horizontal" role="form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for snippets" id="date-range-box" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Advanced <span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-group">
<label for="filter">Location</label>
<select class="form-control">
<option value="0" selected>All Locations</option>
<option value="1">Location #1</option>
<option value="2">Location #2</option>
<option value="3">Location #3</option>
<option value="4">Location #4</option>
</select>
</div>
<div class="form-group">
<label for="filter">Product</label>
<select class="form-control">
<option value="0" selected>All Products</option>
<option value="1">Product #1</option>
<option value="2">Product #2</option>
<option value="3">Product #3</option>
<option value="4">Product #4</option>
<option value="4">Product #5</option>
</select>
</div>
<div class="form-group">
<label for="contain">Customer Ref</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Try the return false option instead ev.preventDefault()
https://subinsb.com/jquery-return-false-vs-preventdefault/
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