I just want to make a form and wen users fill then click submit it should run a progress bar (which will run to 50%) and pop up error that will refer the user to "contact us" page......i.e the progress bar is supposed to pop up and run it shouldn't appear on the page except user click on the submit after filling the form.....here are my codes ... the progressive bar, the css and the html form
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
$('#error').css("display", "block");
$('#popupContact').css("display", "block");
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
#error {
color: #F00;
display: none;
}
#popupContact {
display: none;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">0%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<div id="error">
Could not connect; please transfer manually.
</div>
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form action="#" method="post" id="form">
<img src="images/3.png" id="close" onclick="div_hide()" />
<h2>Transfer Details</h2>
<hr/>
<fieldset>
<legend>Reciever's information:</legend>
Account Number:
<br>
<input type="text" name="Account number" onkeyup="checkInput(this)" value="" id="name" placeholder="Account Number">
<br> Account Name:
<br>
<input type="text" name="Account Name" value="" id="name" placeholder="Account Name">
<br>
<br> Routing (ABA):
<br>
<input type="text" name="Routing (ABA)" onkeyup="checkInput(this)" id="name" value="" placeholder="Routing (ABA)">
<br>
<br> Bank Name:
<br>
<input type="text" name="Bank Name" id="name" value="" placeholder="Bank Name">
<br>
<br> Account Type:
<br>
<select name="Account Type" placeholder="Account Type">
<option>Fix Deposit</option>
<option>Checking</option>
<option>Savings</option>
<option>Current</option>
</select>
</fieldset>
<a id="submit" href="javascript: check_empty()" onclick="move()">Send</a>
<p><span>Note :</span> All Form Is Required.</p>
</form>
</div>
Related
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.
The submit button is refreshing the page, which leads to showing elements, I don't want to be shown.
I tried having a preventDefault() function but then it wouldn't submit the form.
I tried it without but if I do so, the form would submit but the elements are still shown.
$(".signupbtn").click(function(e){
console.log("Sign up clicked");
document.getElementsByClassName("huhu")[0].style.display = "none";
document.getElementsByClassName("afterForm")[0].style.display = "block";
e.preventDefault();
console.log("Succes")
});
<!-- the output from the form -->
<div class="afterForm" >
<h3 id="output"/>
</div>
<!-- the submiting -->
<form class="modal-content" id="myForm" onsubmit="readForm()">
<div class="container">
<h1 >Order</h1>
<p>Please fill in this form to receive your meal. Required fields: *</p>
<hr>
<label for="email"><b>Email*</b></label>
<input type="text" placeholder="zyxzyx#domain.com" name="email" value="" required>
<label for="adr1"><b>Adress* (Housenumber, Street, City)</b></label>
<input type="text" placeholder="555, Zxy blvd, San zxy" name="adr1" value="" required>
<label for="adr2"><b>Adress* (ZIP, State)</b></label>
<input type="text" placeholder="00000, ZY" name="adr2" value="" required>
<p>By pressing "Order" you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn" >Order</button>
</div>
</div>
</form>
<!-- the ordering -->
<div class="huhu">
<h1 class="ord">Select your order:</h1>
<input onclick="firstIcon()" id="fIcon" type="image" src="https://dl.dropboxusercontent.com/s/kw6l23hm37kzqq8/sushi.png" />
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;vertical-align:middle" class="button">
<span>Next Step </span>
</button>
</div>
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.signupbtn {
float: left;
width: 50%;
}
I except the class "huhu" to vanish and the class "afterForm" to show after the order button is clicked. If don't fill in the form, click Order and then cancel, the elements hide but don't show.
Is there an other solution than preventDefault() or is the solution easier than I thought?
we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.
please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery code :-
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}
Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
You can find working jsfiddle here without so much changes to your code
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
Multiple checkbox toggle with image and textarea
Here is updated jquery function:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.
Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
I have three fields and one next button. I have to display each field one by one after clicking on next button. Means I have to display only one field at a time.
For example. First text box displaying with next button after clicked on next button then display a second text box with next button same on third one but this time no next button. It will display submit button. Would you help me out in this?
.steps{
max-width:500px;
height:auto;
margin:0 auto;
padding:70px 0;
background:#ffffff;
border:1px solid #e1e8f2;
position:relative;
text-align:center;
}
label
{
display: block;
}
.field-set
{
text-align: left;
}
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name"/>
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email"/>
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no"/>
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
Try something like
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
countshow++;
} else {
$("form").unbind("submit").submit();
}
})
I've also changed some of your css.
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
if ((count - 1) == countshow) {$(this).val("sumbit")}
} else {
$("form").unbind("submit").submit();
}
countshow++;
})
.steps {
max-width: 500px;
height: auto;
margin: 0 auto;
padding: 70px 0;
background: #ffffff;
border: 1px solid #e1e8f2;
position: relative;
text-align: center;
}
label {
display: block;
}
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start Form Steps -->
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name" />
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email" />
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no" />
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
<!-- End Form Steps -->
Try something like this:
$(document).ready(function(){
var step = 1;
$('#btn').click(function(){
if( step < 5 )
{
$('.txt').eq(step - 1).hide();
$('.txt').eq(step).show();
step++;
}
else
{ /*Submit the form here*/ }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="txt" placeholder="1">
<input class="txt" style="display:none;" placeholder="2">
<input class="txt" style="display:none;" placeholder="3"><input class="txt" style="display:none;" placeholder="4">
<input class="txt" style="display:none;" placeholder="5">
<input type="button" value="Next" id="btn">
I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)