I am currently working on a form for a page in MOSS 2007 and am forced to use a lot of JavaScript in place of CSS3 and jQuery due to government restrictions. I come from the C# world and JavaScript is still somewhat new to me.
My current objective is to replace the contents of a stationary div element with the contents of another that is hidden on the page. I'm coming to my wits end trying resolve this only remaining issue on this page. Currently I'm using a simple (pseudo: doc.getbyid(id).innerhtml = newdiv) to replace the contents of the div, now my two theories are that either 1) the onclick event isn't calling the function, or 2) the replace just isn't working.
(function() {
document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
The only other thing I can think to do is to store the inner html in a var and just assigning it as needed. Please help!
There are 2 things why it's not working
change innerHtml to innerHTML
add a load handler so DOM is ready before you target its elements
I also chose to drop the unnecessary document.getElementById() statement and simpy call the nextSlide function with its first item index
window.addEventListener('load', function(e) {
nextSlide(0);
})
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
Your code is ok, but replace innerHtml with innerHTML, JavaScript is case sensitive.
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(var id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
You had an issue with the param in your nextSlide function, you were passing var id, when it should just be id. and your var eIDs was missing an = so your array was never declared in the variable. the gentleman above is still using the incorrect code. Do you have a click handler? can we see it?
The issue was with placement of the script itself; moved to the end of the body and worked like a charm! The little issues such as innerHTML and the equals sign for eids and the var id were just little oversights; of course I had to add the additional handlers for onclick once I got the load to work. It's now working like a charm. Thank you all for being such great help!
Related
building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>
I have a multi-step form that has several different slides of different input fields. I'm trying to get it so that when the user presses "enter" after filling out the input, the form will progress to the next slide. I also want the button, when clicked, to also progress the form (this is what I currently have as the functionality). I can't figure out how to include the "enter" function because everything I have seen involves the .keydown method.
Here's what I have thus far:
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var arrayfname = ['#txt_first_name'];
var arraylname = ['#txt_last_name'];
var arrayzip = ['#txt_zip'];
var arrayaddress = ['#txt_address'];
var arrayphone = ['#txt_phone'];
var arraydob = ['#hdn_dob'];
$('.next').click(function(){
if(animating) return false;
if($(this).data('slide') == "1") {
moveon = RegPath.Functions.validateFields(arrayfname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "2"){
moveon = RegPath.Functions.validateFields(arraylname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "3"){
moveon = RegPath.Functions.validateFields(arrayzip,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "4"){
moveon = RegPath.Functions.validateFields(arrayaddress,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "5"){
moveon = RegPath.Functions.validateFields(arrayphone,false,"",'[{access_token}]');
}
//var moveon = RegPath.Functions.validateFields(arrayPersonalInfo,false,"",'[{access_token}]');
if(moveon == false){
return false;
}
else
{
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
}
});
$('.submitForm').click(function(){
var popUpURL = '{{{offer.linkout_url}}}';
var moveon = RegPath.Functions.validateFields(arraydob,true,popUpURL,'[{access_token}]');
});
</script>
<script>
$(function(){
RegPath.PrepForm.prepFormPersonal();
RegPath.PrepForm.prepFormContact();
});
</script>
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
}
body {
font-family: montserrat, arial, verdana;
background: url('[{offer_cdn_url}]/images/cag/cag_purp_bg.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/*form styles*/
#msform {
width: 465px;
margin: 29px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: rgba(255, 255, 255, 0.7);
border: 0 none;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
width: 465px;
margin: 0 0%;
padding-top: 0%;
padding-bottom: 4%;
/*stacking fieldsets above each other */
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
.header {
background: #f6cc27;
padding-top: 4%;
padding-bottom: 4%;
margin-bottom: 3%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 1%;
padding-right: 1%;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 90%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 16px;
margin-top: 3%;
margin-left: 3%;
margin-right: 3%;
}
p {
font-size: 0.6em;
text-align: left;
}
/*
input#txt_zip {
width: 40%;
float: left;
}
label#zip {
width: 100%;
display: inline-flex;
float: left;
}
input#txt_dob {
width: 50%;
float:left;
}
label#dob {
width: 100%;
display:inline-flex;
float: left;
}
*/
/*buttons*/
#msform .action-button {
width: 90%;
background-image: linear-gradient(#009b00, #00c800);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 30px;
cursor: pointer;
padding: 17px 5px;
margin: 10px 5px;
font-size: 19px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#msform .disabledSubmit {
background-color: #9f9e9e;
}
input.submit {
background-image: linear-gradient(#009b00, #00c800);
color: #ffffff !important;
border-radius: 30px !important;
cursor: pointer;
padding: 17px 5px !important;
font-size: 19px !important;
font-weight: 700;
}
/*headings*/
.fs-title {
font-size: 21px !important;
text-transform: uppercase;
color: #000000;
font-weight: 700;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
.tcpaCopy {
font-size: 8px;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
}
.disabled {
background-color: #e5e5e5;
color: #969696 !important;
}
.check {
display: inline-flex;
}
label {
font-size: 1.1em;
padding-bottom: 3%;
font-weight: 700;
padding-top: 2%;
}
.green {
background-color: #27AE60 !important;
}
#msform .tcpaSubmit:hover, #msform .tcpaSubmit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 16%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #f6cc27;
color: white;
}
input#opt_in {
width: 11% !important;
}
.record_table {
width: 100%;
border-collapse: separate;
}
.record_table tr:hover {
cursor: pointer;
}
td#consent {
width: 30%;
padding-top: 3%;
padding-bottom: 3%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #f6cc27;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #ffffff;
border-color: #f6cc27;
}
#space {
margin-top: 2%;
}
td#consentInfo {
border-left-color: #ffffff;
font-size: 0.8em;
vertical-align: middle !important;
}
.record_table td {
border: 1px solid #eee;
}
#media only screen and (max-width: 768px) {
#msform {
width: 80%;
}
#msform fieldset {
width: 100%;
}
.fs-title {
font-size: 20px;
}
input:matches([type=button]) {
-webkit-appearance: none;
}
.subcopy {
font-size: 1.5em !important;
}
#subtitle {
font-size: 1.1em !important;
}
#logo {
width: 200px;
}
}
/* TOP OF THE PAGE */
.subcopy {
margin-top: 10px;
padding-bottom: 0;
font-size: 2.5em;
color: #F6CC27;
font-family: 'Kanit', sans-serif;
font-weight: bold;
text-align: center;
}
#subtitle {
text-align: center;
color: #ffffff;
font-family: 'Kanit', sans-serif;
font-size: 2em;
}
#logo {
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 2%;
}
<div class="container">
<div class="logo">
<img src="[{offer_cdn_url}]/images/cag/CAG_logo#2x copy.png" id="logo">
</div>
<div class="questions subcopy" > YOU MAY BE ENTITLED TO $1000 OR MORE </div>
<div id="subtitle">Over $1 Billion of Class Action Settlement Funds</div>
</div>
<div class="container">
<!-- multistep form -->
<form id="msform" method="post" action="/api/register">
<!--Needed-->
<input type="hidden" name="remotePenCriteriaPassed" id="remotePenCriteriaPassed" value="false" />
<input type="hidden" name="zip_lookup_done" id="zip_lookup_done" value="" />
<!-- progressbar
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<!--<h3 class="fs-subtitle">Step 1:</h3>-->
<label for="txt_first_name">First Name</label>
<input type="text" name="first_name" id="txt_first_name" value="[{first_name}]" placeholder="First Name" required/>
<div class="help-block with-errors">Please enter your first name</div>
<input type="button" name="next" class="next action-button" data-slide="1" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_last_name">Last Name:</label>
<input type="text" name="last_name" id="txt_last_name" value="[{last_name}]" placeholder="Last Name" required/>
<div class="help-block with-errors">Please enter your last name</div>
<input type="button" name="next" class="next action-button" data-slide="2" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_zip" id="zip">Zip Code:</label>
<input type="tel" name="zip" id="txt_zip" value="[{zip}]" placeholder="Zip Code" required/>
<div class="help-block with-errors">Please enter a valid zip code</div>
<input type="button" name="next" class="next action-button" data-slide="3" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_address">Address:</label>
<input type="text" name="address_1" id="txt_address" value="[{address_1}]" placeholder="Address" required/>
<div class="help-block with-errors">Please enter a valid address</div>
<input type="button" name="next" class="next action-button" data-slide="4" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_phone">Phone:</label>
<input type="tel" name="phone" id="txt_phone" value="[{phone}]" placeholder="Phone Number (123) 456-7890" required/>
<div class="help-block with-errors">Please enter a valid phone number</div>
<input type="button" name="next" class="next action-button" data-slide="5" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_dob" id="dob">Date of Birth:</label>
<input type="tel" name="dob" id="hdn_dob" value="[{dob}]" placeholder="Birthday (mm/dd/yyyy)" required/>
<div class="help-block with-errors">Please enter a valid date</div>
<input type="button" id="btnSubmit" class="submit submitForm submit-btn" value="CLAIM YOUR CASH" />
</fieldset>
</form>
</div>
I don't think you can do this without using the .keydown method or a similar method. Still it is quite easy to implement. Not sure if you are trying to avoid it for a particular reason, but if it is a matter not knowing how to implement it, please find the code below.
$(document).keypress(function(e) {
if(e.which == 13) {
// Just add your validation code here.
}
});
In case anyone is looking for a solution: this is what ended up working
$('input').keypress(function(e){
if(e.which == 13){//Enter key pressed
var Input = $(this).data('slide');
$('*[data-slide="'+Input+'"]').click();
}
});
I want to hide the form inside the filter section without hiding title.
I tried to add form tag:
$(this).parents('.filter-section form').toggle("slideUp");
But it's not working.
Here is a fiddle
$('.filter-section .filter-toggle').click(function() {
$(this).parents('.filter-section').toggle("slideUp");
});
You can do it by using $(this).next('form').toggle("slideUp"); :
The updated JSFIDDLE.
$('.filter-section .filter-toggle').click(function() {
$(this).next('form').toggle("slideUp");
});
/*filter*/
.filter {
border-radius: 5px;
border: solid 1px #008db0;
padding: 20px;
background: #fff;
}
.filter-section {
border-bottom: solid #000 1px;
padding: 10px 0 10px 0;
}
.filter-title {
font-size: 20px;
font-weight: 900;
}
.filter input[type=checkbox] {
margin-right: 8px;
}
.filter-section:last-child {
border-bottom: 0;
}
.filter-section:first-child {
padding: 0 0 10px 0;
margin-top: -10px;
}
.filter .rating span {
position: absolute;
top: 0px;
right: 70px;
}
.filter .rating span:before {
color: gold;
font-size: 23px;
}
.filter .badge {
background: #008db0;
padding: 2px 2px;
font-weight: normal;
font-size: 12px;
border: solid 2px #fff;
border-radius: 15px;
box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39);
margin: 0;
}
.filter-section form .badge {
background: #f87e47;
padding: 3px 1px;
margin-right: 6px;
}
.filter .more {
color: #000;
font-weight: normal;
font-size: 15px;
float: right;
margin: 12px 0 0;
}
#amount-min {
border: 0;
color: #f6931f;
font-weight: bold;
}
#amount-max {
border: 0;
color: #f6931f;
font-weight: bold;
text-align: right
}
.ranger input {
width: 78px;
}
.ranger {
display: flex;
}
.ui-slider-handle {
border-radius: 10px;
left: 60%;
}
.ui-slider-range {
background: #ff7400;
}
.filter-toggle {
cursor: pointer;
}
.filter-toggle:after {
float: right;
content: "\f107";
font-family: 'FontAwesome';
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' />
<script src='https://use.fontawesome.com/0e9115ffee.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>
<div class="row">
<div class="col-md-2 filter">
<div class="filter-section">
<p class="filter-title">Etoiles</p>
<p class="rating rating-5star"><span></span>
</p>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Budget</p>
<form action="" class="form">
<p class="ranger">
<input type="text" id="amount-min" />
<input type="text" id="amount-max" />
</p>
<div id="slider-range"></div>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Arrangement</p>
<form id="arrangementfilter" action="">
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br>
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Ville</p>
<form id="cityfilter" action="">
<input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br>
</form>
Plus des villes <span class="badge">13</span>
</div>
</div>
I am trying to display all the form input values from a fieldset to next fieldset for reviewing and then submit using submit button.
I have searched for solution on Google and found that it can be achieved using jquery serialize. But I want it to display as a form but with disabled fields.
Please guide me to the right direction.
This is my code.
//jQuery time
var current_fs, newdc, adc, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
//Review New Domain Controller
$(".review").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $('.newdcreview');
//show the next fieldset
$('.newdcreview').show();
//hide the current fieldset with style
$('.newdc').animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
$('.newdcreview').css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
});
/*custom font*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10% 50px;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.main {
margin-top:20px;
margin-bottom:20px;
}
#msform .main .action-button {
width: 250px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"></script>
<form id="msform">
<fieldset class="newdc">
<h2 class="fs-title">New Domain Controller</h2>
<h3 class="fs-subtitle">Fill all the fields below</h3>
<input type="text" name="ip" id="ip" placeholder="IP" />
<input type="text" name="subnet" id="subnet" placeholder="Subnet Mask" />
<input type="text" name="gateway" id="gateway" placeholder="Gateway" />
<input type="text" name="hostname" id="hostname" placeholder="Hostname" />
<input type="text" name="domain" id="domain" placeholder="Domain Admin Name" />
<input type="text" name="netbios" id="netbios" placeholder="NetBios Name" />
<input type="text" name="password" id="password" placeholder="Password" />
<input type="text" name="confirm_password" id="confirm_password" placeholder="Re-enter Password" />
<input type="button" name="next" class="review action-button" value="Submit" />
</fieldset>
<fieldset class="newdcreview">
<h2 class="fs-title">New Domain Controller</h2>
<h3 class="fs-subtitle">Fill all the fields below</h3>
<input type="text" class="show_ip" readonly="readonly" />
<input type="text" class="show_subnet" readonly="readonly" />
<input type="text" class="show_gateway" readonly="readonly" />
<input type="text" class="show_hostname" readonly="readonly" />
<input type="text" class="show_domain" readonly="readonly" />
<input type="text" class="show_netbios" readonly="readonly" />
<input type="text" class="show_password" readonly="readonly" />
<input type="button" name="next" class="next action-button" value="Confirm" />
</fieldset>
</form>
So, I've got the signin example running, and I can't figure out where I've gone astray. Here's a picture. The top picture is what I get in my browser when I run my code locally -- but the example on the bootstrap site looks like the second one, below, which is what I want. What am I missing?
Cheers,
Simon
Here's the code I'm using, as well:
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
The example login form has custom CSS embedded in the page.
http://jsfiddle.net/5Fzbw/
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}