We Keep Coding

Javascript code style property value not updating after Ajax call

I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']

The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>

Why jQuery isn't applying specific style on valid input?

In the example below the expected behavior is that once the form field has valid input, a specific class is applied, which pushes the input label to sit mid-line of the form field's border. You can see this when you navigate to each input.
When a field is validated, that class, valid-ct is applied and it's supposed to remain there and keep that label above the input. But, as I navigate to each field, the class, valid-ct goes away and the label goes back into the placeholder position, covering any input.
I believe the culprit is in this function, but I am not getting any errors, so I'm not sure what I'm doing wrong:
$(function () {
$("input, textarea").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
Where am I going wrong with this?
(function () {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("ClassChanged");
// return the original result
return result;
};
})();
$(function () {
$("input, textarea").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
$("input.required, textarea.required").trigger("ClassChanged");
$(".request-form .form-ct a.company-btn--blue").on("click", function (e) {
e.preventDefault();
$("#footer-form-submit").submit();
});
$("input").on("focus blur", function () {
$(this).parent().toggleClass("focus-ct");
});
// Create a custom classChange trigger
(function () {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("ClassChanged");
// return the original result
return result;
};
})();
$(function () {
$("input").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
$("input.required").trigger("ClassChanged");
.container {
padding: 0.5rem;
}
.request-form h2 {
margin: 80px auto 56px;
max-width: 768px;
font-weight: 800;
}
.request-form h2 span {
color: #005fec;
font-weight: 800;
}
#media screen and (min-width: 768px) {
.request-form h2 {
margin-bottom: 72px;
text-align: center;
}
}
.request-form .container .row h4.sub-head {
margin-bottom: 2.5rem;
margin-top: 0;
}
.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="number"] {
background-color: #fff;
border: 0;
font-size: 20px;
width: 100%;
height: 60px;
cursor: auto;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
transition: background-color 0.4s;
border: 1px solid #6d7582;
padding: 0 16px;
border-radius: 4px;
}
.request-form input:-webkit-autofill {
box-shadow: 0 0 0 50px white inset;
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
.request-form input:-webkit-autofill:focus {
box-shadow: 0 0 0 50px white inset;
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
.request-form .email-ct {
margin-right: 12px;
}
.request-form .phone-ct {
margin-left: 12px;
}
.request-form .input-ct {
position: relative;
margin-top: 24px;
width: 100%;
}
.fandlname {
display: flex;
}
.fandlname .first-name-ct {
margin-right: 12px;
}
.fandlname .last-name-ct {
margin-left: 12px;
}
.request-form .input-ct label:not(.error) {
color: #444a53;
position: absolute;
top: 22px;
left: 8px;
background-color: #fff;
padding: 0 8px;
font-weight: 300;
font-size: 16px;
transition: all 200ms ease-in-out;
pointer-events: none;
z-index: 1;
}
.request-form .state-search-ct.error-ct.input-ct label {
top: 22px;
}
.state-search-ct.valid-ct label.error {
display: none !important;
}
.request-form .input-ct.focus-ct label:not(.error) {
color: #005fec !important;
font-family: motiva-sans, sans-serif;
top: -13px;
z-index: 1;
}
.request-form .input-ct.focus-ct label.error {
display: none !important;
}
.request-form .input-ct input:focus,
.request-form .input-ct textarea:focus {
border-color: #005fec !important;
}
.request-form .input-ct input.error,
.request-form textarea.error {
border-color: #e12d2d;
}
.request-form .input-ct.valid-ct label {
color: #444a53;
top: -8px;
z-index: 1;
}
.request-form .input-ct.error-ct label {
color: #e12d2d;
z-index: 1;
}
.request-form label.error {
font-size: 14px;
font-weight: 400;
background: url("/assets/icons/icon-error.svg") left center no-repeat;
padding-left: 20px;
line-height: 16px;
color: #e12d2d;
margin-top: 8px;
display: block !important;
text-align: left;
}
.request-form .valid-ct label.error {
display: none !important;
}
div.error-ct h4 {
color: #e12d2d;
margin-bottom: 8px;
}
.request-form textarea {
border: 1px solid #6d7582;
border-radius: 4px;
background-color: #fff;
font-size: 20px;
width: 100%;
height: 136px;
cursor: auto;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 20px 16px;
box-sizing: border-box;
transition: background-color 0.4s;
font-family: motiva-sans, sans-serif;
}
.error-label-ct {
margin: 0px 0 16px;
}
.request-form .info-txt {
margin: 4px 0 0px;
font-size: 14px;
color: #62668c;
line-height: 16px;
}
#media screen and (min-width: 500px) {
.company-bttn-anim:first-child {
margin-bottom: 0.75rem;
}
}
.request-form h4.big {
font-size: 24px;
margin-bottom: 0;
}
.request-form h4.title {
font-size: 12px;
padding-bottom: 0;
margin-top: 0;
}
.request-form h4.by-submit {
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
.request-form h4.by-submit a {
color: inherit;
font-weight: inherit;
}
.request-form .hidden-fields {
display: none;
}
.request-form .hidden-fields .input-ct {
margin: 20px 0;
}
.request-form .max-char {
display: block;
font-size: 14px;
color: #18216d;
}
.request-form .agent-group h4 {
padding-bottom: 0;
}
.request-form .clarification-txt {
display: block;
font-size: 14px;
padding-bottom: 15px;
}
.request-form .disclaimer a {
font-weight: 800;
}
.request-form .disclaimer a:hover {
text-decoration: underline;
}
.request-form .g-recaptcha {
margin: 45px 0 0px;
}
.request-form #submit-btn {
min-width: 165px;
height: 68px;
margin-top: 48px;
line-height: 68px;
padding: 0;
pointer-events: none;
opacity: 0.35;
}
.form-failure .light-blue {
margin-top: 50px;
}
.form-failure p,
.form-success p {
font-size: 18px;
margin: 20px auto 0;
}
.company-bttn-anim {
border: 0;
}
.hidden {
display: none;
}
#media screen and (max-width: 767px) {
.hero {
min-height: unset;
}
.request-form .email-ct {
margin-right: 0;
}
.request-form .phone-ct {
margin-left: 0;
}
}
.submit-ct {
margin: 32px 0 0;
}
#media screen and (min-width: 1200px) {
.form-ct {
margin-top: -24px;
}
.request-form .container {
padding: 0;
}
}
#media screen and (min-width: 991px) {
.request-form h3.sub-head {
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="request-form form-ct">
<form accept-charset="UTF-8" method="post" action="">
<input type="hidden" name="oid" value="">
<div class="utm-params-and-cta-id" style="display:none;">
<input type="hidden" name="utm_term" id="utm_term" value="<? if(isset($_GET['utm_term'])){echo $_GET['utm_term'];} ?>">
<input type="hidden" name="utm_content" id="utm_content" value="<? if(isset($_GET['utm_content'])){echo $_GET['utm_content'];} ?>">
<input type="hidden" name="utm_campaign" id="utm_campaign" value="<? if(isset($_GET['utm_campaign'])){echo $_GET['utm_campaign'];} ?>">
<input type="hidden" name="utm_source" id="utm_source" value="<? if(isset($_GET['utm_source'])){echo $_GET['utm_source'];} ?>">
<input type="hidden" name="utm_medium" id="utm_medium" value="<? if(isset($_GET['utm_medium'])){echo $_GET['utm_medium'];} ?>">
<input type="hidden" name="cta_id" id="cta_id" value="No cta_id set">
</div>
<div class="fandlname">
<div class="input-ct first-name-ct">
<label for="first_name">First name</label>
<input type="text" autocomplete="given-name" name="first_name" id="first_name" value="" class="text required" size="30" maxlength="32">
</div>
<div class="input-ct last-name-ct">
<label for="last_name">Last name</label>
<input type="text" autocomplete="family-name" name="last_name" id="last_name" value="" class="text required" size="30" maxlength="32">
</div>
</div>
<div class="input-ct">
<label for="email">Email address</label>
<input type="email" autocomplete="email" name="email" id="email" value="" class="text required email" size="30" maxlength="255">
</div>
<div class="input-ct">
<label for="phone">Phone</label>
<input type="tel" autocomplete="tel" name="phone" id="phone" value="" class="text required" size="30" maxlength="32">
</div>
<div class="input-ct">
<label for="company">Company</label>
<input type="text" autocomplete="organization" name="company" id="company" value="" class="text required" size="30" maxlength="100">
</div>
<div class="input-ct">
<label for="employees">Number of employees</label>
<input type="text" name="employees" id="employees" value="" class="text required" size="30" maxlength="8">
</div>
<div class="submit-ct">
<div>
<input type="submit" accesskey="s" id="jbx-submit" aria-hidden="Submit" value="Get started" class="company-bttn-anim company-btn--blue large light" name="submitBttn">
<img src="https://companyweb.imgix.net/icons/Arrow-Right-Hover-Animation_white-2021.svg" alt="right arrow icon" class="learn-more-arrow">
</div>
</div>
</form>
</div>
</div>

You have to handle this on input change event if the length of the input is greater than 0 apply the valid-ct class otherwise don't
$('input').keyup(function () {
if($(this).val().length > 0 ){
$(this).parent().addClass("valid-ct");
}else {
$(this).parent().removeClass("valid-ct");
}
});

Radio button does not hide/show section

Description:
I have 3 sections in my page that I want to do, each having a radio button to select an object.
Problem:
I am trying to figure out a problem where when I press the "online radio button" it will show up the section that I need. But when I press the "Face to Face" the online section keeps appearing.
Expected Result:
Each Radio button should work with each section and hide the other one.
HTML CODE:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 50px;
border: 2px solid;
border-radius: 25px;
}
.dropdown {
position: relative;
display: inline-block;
margin-left: 40%;
margin-top: 8%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 350px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.covid {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.covid h2 {
text-align: center;
font-weight: bold;
}
.covid img {
position: absolute;
margin-left: 50%;
height: 200px;
}
.covid p {
font-size: 20px;
margin-left: 20%;
}
.textred {
font-size: 20px;
display: inline;
color: red;
}
.textgreen {
font-size: 20px;
display: inline;
color: green;
}
.status {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.status h2 {
text-align: center;
font-weight: bold;
}
.china {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.amazon {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.reviews {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.reviews h2 {
text-align: center;
font-weight: bold;
}
.bolded {
font-size: 20px;
display: inline;
}
.stars {
white-space: nowrap;
font-size: 20px;
magrin: 15%;
display: inline;
white-space: pre;
color: yellow;
}
.review {
font-size: 20px;
display: inline;
margin: 20%;
font-weight: normal;
}
.mainscreen {
background-color: white;
height: 1800px;
}
.avatar {
vertical-align: middle;
margin-left: 15%;
margin-top: 1%;
width: 50px;
height: 50px;
border-radius: 50%;
}
.choice1{
margin-left: 45%;
}
.choice3{
margin-left: 43%;
}
.choice4{
margin-left: 41%;
}
.button1{
margin-left: 48%;
}
.notreviews{
margin-top: -9%;
}
<div class="w3-panel w3-white w3-card-4 reviews">
<h2>How will you like your appointment to be?</h2>
<section id="choice1">
<form>
<input
type="radio"
name="choice"
class="choice1"
id="OL"
value="Online"
/>
Online
<input
type="radio"
name="choice"
class="choice2"
id="FTF"
value="Face To Face"
/>
Face To Face
</form>
<br />
<br />
<br />
<button onclick="submitAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- Online Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Online">
<h2>Online Appointments</h2>
<section id="choice2">
<form>
<input
type="radio"
name="choice2"
class="choice3"
id="ZOOM"
value="Zoom"
/>
Zoom
<input
type="radio"
name="choice2"
class="choice2"
id="MEET"
value="Meet"
/>
Google Meet
</form>
<br />
<br />
<br />
<button onclick="submitOnlineAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- FTF Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Face">
<h2>Face To Face Appointments</h2>
<section id="choice3">
<form>
<input type="radio" name="choice3" class="choice4" id="Amazon" value="Ama"/> Amazon Rainforst Location
<input type="radio" name="choice3" class="choice2" id="China" value="China" /> China Location
</form>
<br>
<br>
<br>
<button onclick="submitFTFAnswer()" class="button1" >Submit Answer</button>
</section>
</div>
<section id="section">
Jquery Code:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
What am I doing wrong and how can I fix this?

How to use the "enter" key to progress through a form and also have clicking a button as an option as well on a mutli-step form

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();
}
});

javascript - action when file selected

I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:
function showNoFile() {
if(document.getElementById("video-file-upload").value != "") {
alert("yeap");
}
}
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>

use it on DOM ready
$("#video-file-upload").change(function(){
if($(this).val() != ""){
alert("some file selected");
}
});
Fiddle

if (document.getElementById("video-file-upload").files.length == 0) {
alert("yeap");
}
Check for files.length is equal to 0.

with javascript:
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>