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>

I am getting refresh after executing submit button in login form

I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>intern.local</title>
<link rel="stylesheet"><link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div class="outer">
<div class="inner one"
id="box_one">
<h1 class="main">
Welcome to intern.local
</h1>
<h3 id='login_1'>
Enter details and login to continue.
</h3>
</div>
<div class="inner two"
id="box_two">
<div class="head">
<h1> Welcome</h1>
<h2>Please Login</h2>
<div class="error">
Please Enter valid Password.
</div>
<div id="login"
class="login">
<form class="login_form" onsubmit="validate()">
<input type="text"
pattern="^\w+([\.-]?\w+)*#docquity.com"
id="uname"
class="inp uname"
name="uname"
placeholder="Username" required><br>
<input type="password"
minlength="6"
id="pass"
class="inp pwd"
name="pass"
placeholder="Password" required>
<small id="pass_error"></small>
<input type="submit"
id="smt"
value="Submit"
class="btn sbmt">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css code
body {
margin:0px;
height:100%;
border: none;
padding:0px;
}
.inner{
float:left;
width: 50%;
height: 100vh;
}
.one {
background-color:cornsilk;
}
.two{
/*background: rgb(63,94,251);*/
background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
padding: 0%;
border: 0%;
margin: 0%;
color: cornsilk;
}
.head{
height: auto;
padding-top: 15%;
}
.head h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
}
.head h2{
text-align: center;
}
form {
margin: 0 auto;
}
.login {
text-align: center;
}
.inp {
border: none;
background: none;
box-shadow: 0px 2px 0px 0px white;
width: 50%;
color:blanchedalmond;
font-size: 25px;
outline: none;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding-left: 2%;
}
.inp:focus:invalid{
box-shadow: 0px 2px 0px 0px red;
}
small {
color: red;
font-weight: bold;
}
.pwd {
margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
color: blanchedalmond;
}
.btn {
align-items: center;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #000102;
display: inline-flex;
height: 48px;
justify-content: center;
padding: 2px 24px;
width: 30%;
font-size: 25px;
}
.sbmt:hover{
background-color: darkslategray;
color: floralwhite;
}
.main {
margin-top: 20%;
text-align: center;
font-size: 60px;
background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.one h3 {
text-align: center;
color:darkslategray;
}
.error_message{
background-color: red;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
.error {
display: none;
}
javascript code
function mail_velidate(mail){
var mail_pattern = /^\w+([\.-]?\w+)*#docquity.com/;
if(mail.match(mail_pattern))
{
return true;
}
else{
return false;
}
}
function password_check(pass){
var pass_regex = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{7,15}$/;
if (pass.match(pass_regex)){
return true;
}
else{
return false;
}
}
const mail = document.getElementById("uname");
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("uname");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Give valid docquity mail id");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
function validate(){
var user = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
if(password_check(pass)){
document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
document.getElementById('box_two').style.display = 'none';
document.getElementById('box_one').style.width = '100%';
}
else{
document.getElementsByClassName("error")[0].className = "error_message";
}
}
the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.

On your HTML, you need to place event.preventDefault(); like this:
<form class="login_form" onsubmit="event.preventDefault(); validate();">
event.preventDefault() will stop any default behavior when submitting. In the case of submit, it is the page reload.
https://codepen.io/tunk/pen/tjGdp

My BMR calculator is not showing a result

I wrote this for a Bmr tool on my website. I don't have much understanding regarding html CSS just started learning this. . On running the snippet is not showing the result. I am unable to figure out 'why?'.
I wrote a similar code for BMI that worked fine but this one is not.
var bmr;
function calc() {
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var height = document.getElementById("height").value;
var weigth = document.getElementById("weigth").value;
if (gender == "masc") {
bmr = 66.5 + (13.75 * weigth) + (5.003 * height) - (6.755 * age);
} else {
bmr = 655.1 + (9.563 * weigth) + (1.850 * height) - (4.676 * age);
}
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
calc();
document.getElementById('lblResult').innerHTML = bmr;
})
* {
.column {
max-block-size: 100%;
}
#media (min-width: 600px) {
.column {
width: 50%;
}
}
}
body {
margin: 0;
min-height: 100vh;
;
background: linear-gradient(to bottom right, #ffffff, #ffffff) font-family: LEMONMILK-Bold;
font-size: 1rem;
color: #ffffff;
}
.form {
background-color: #0295DB;
max-height: 240px;
max-width: 450px;
border-radius: 20px;
margin: 1.25rem auto 1.25rem auto;
padding-bottom: 0.4rem;
display: block;
border: solid 1px #289df6;
box-shadow: 0 0 40px 0 #ddd;
}
.form:hover {
box-shadow: 0 0 60px 0 #ccc;
transition: .4s;
transform: scale(1.02);
}
.row-one {
padding: 1.25rem;
}
.row-two {
padding: 1.25rem;
}
.text-input {
width: 3.125rem;
height: 1rem;
border-radius: 10px;
background-color: #dbeffe;
border: none;
outline: none;
padding: 0.313rem 0.625rem;
cursor: pointer;
}
.text-input:last-child {
margin-bottom: 2.188rem;
}
.text-input:hover {
background-color: #cbe7fd;
}
#submit {
border: none;
border-radius: 10px;
max-height: 2.5rem;
max-width: 8.75rem;
background-color: #ffffff;
color: #289df6;
margin: auto;
display: block;
outline: none;
cursor: pointer;
}
#submit:hover {
background-color: #f7f7f7;
}
.text {
display: inline-block;
margin: 0.313rem 1.25rem 0.313rem 0.5rem;
;
}
.row-one {
padding: 1.875rem 1.25rem 1.563rem 1.25rem;
}
.row-two {
padding: 0.938rem 1.25rem 1.875rem 1.25rem;
}
.container {
display: inline-block;
position: relative;
padding-left: 1.875rem;
cursor: pointer;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.563rem;
width: 1.563rem;
background-color: #dbeffe;
border-radius: 50%;
}
.container:hover input~.checkmark {
background-color: #cbe7fd;
}
.container input:checked~.checkmark {
background-color: #289df6;
}
h3 {
font-size: 1rem;
font-weight: 400;
text-align: center;
padding: 0.938rem;
color: #333333;
}
h3 b {
font-size: 2rem;
font-weight: 400;
color: #289df6;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkmark:after {
display: block;
}
.container .checkmark:after {
left: 0.563rem;
top: 0.313rem;
width: 0.313rem;
height: 0.625rem;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<link href="http://gadgetsense.in/wp-content/uploads/2021/09/LEMONMILK-Bold.otf" rel="stylesheet">
<form class="form" id="form" onsubmit="return validateForm()">
<div class="row-one">
<input type="text" class="text-input" id="age" autocomplete="off" required/>
<p class="text">Age</p>
<label class="container">
<input type="radio" name="gender" id="gender" value="fem"><p class="text">Female</p>
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" id="gender" value="masc"><p class="text">Male</p>
<span class="checkmark"></span>
</label>
</div>
<div class="row-two">
<input type="text" class="text-input" id="height" autocomplete="off" required>
<p class="text">Height (cm)</p>
<input type="text" class="text-input" id="weight" autocomplete="off" required>
<p class="text">Weight (kg)</p>
</div>
<button type="button" onclick="" id="submit">Submit</button>
</form>
<p id="lblResult">BMR</p>

First, change onclick to include function name...
<button type="button" onclick="calc" id="submit">Submit</button>
Then change to...
<script>
function calc() {
var bmr;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var height = document.getElementById("height").value;
var weigth = document.getElementById("weigth").value;
if (gender == "masc") {
bmr = 66.5 + (13.75 * weigth) + (5.003 * height) - (6.755 * age);
} else {
bmr = 655.1 + (9.563 * weigth) + (1.850 * height) - (4.676 * age);
}
}
document.getElementById('lblResult').innerHTML = bmr;
})

The error says, that you are using an undefined variable:
"message": "Uncaught TypeError: Cannot read properties of null (reading 'value')",
"filename": "https://stacksnippets.net/js",
"lineno": 202,
"colno": 49
I had personally much trouble with this error, and that was because the elements that I wanted to use in JS wasn't defined.
You define a element with:
id="someid"
class="someid"
The last two JSONs (key: value) give us information about the error's location.
Here also a similar explanation: https://bobbyhadz.com/blog/javascript-cannot-read-property-click-of-null
Hope that helps, OpiliteX

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

jQuery append adds more than one item

I'm trying to create a div automatically when clicking on a button, I have an issue here, for each time I click on the button its incremented the display of the div. Could you please help with this
$(document).ready(function() {
$("#btn2").click(function() {
$("div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>
I followed your suggestion and test it in my own code but I still have the same issue
please find below my code
JavaScript
function DisplayOffer(){
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
$('#row').append('<p id=aaa>'+ value_button + '</p>');
});
}
In my JS I have 4 buttons, when I click on a button it should create two new div for each one i'll display a name of the button and a description for the first step I just wanted to display the buttons's name but it is displayed wrong ( not one time only like I told you in the beginning of my question )
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button></div>';
HTML :
<div class="container" id="id_div_hide">
<div id="row" class="chattt col-sm-3 col-sm-offset-4 frame a">
<div id="test_id"></div>
<div id="output" class="ma"> </div>
<div id="outputh2" class="output2"></div>
<div id="outputh3" class="output3"></div>
</div>
<div id="az1" class="text text-r az1_class" style="background:whitesmoke !important">
<input id="input" class="mytext" placeholder="Type a message" />
</div>
</div>
Full JS :
var me = {};
me.avatar = "https://lh6.googleusercontent.com/-lr2nyjhhjXw/AAAAAAAAAAI/AAAAAAAARmE/MdtfUmC0M4s/photo.jpg?sz=48";
$('#outputh2').hide();
$('#outputh3').hide();
var timedQuestion=0;
var questionNum = 0;
var question = '<div class="text-chat1">Bonjour cher client, moi c est Djezzy bot, tu t appelles comment?</h1></div>';
var output = document.getElementById('output');
output.innerHTML = question;
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button><div id="zmar"></div></div>';
setTimeout(timedQuestion, 2000);
console.log("num question est :"+ questionNum);
}
function DisplayOffer(){
var date = formatAMPM(new Date());
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
//$('#row').append( value_button);
$('#row').append('<span class=aaa>'+value_button+ '</span>');
});
}
// to get the time
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
// to hide and display the chat
function toggle_div(img, id) {
var div = document.getElementById(id);
if(div.style.display=="none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
$(document).keypress(function(e) {
if (e.which == 13) {
bot();
questionNum++;
}
});
CSS :
.chat{
background-color:#fff4f6;
overflow-y:scroll;
width: 280px;
height: 370px;
position: fixed;
//float:right;
bottom: 0px;
right: 0px;
}
.title1{
font-size: 12px;
color: #183f88;
}
.btn_hdwm1{
padding-left: 20px;
padding-right: 15px;
border-radius: 8px;
padding-bottom: 5px;
background: #e11e26;
color: #fff;
}
.btn_hdwm{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
//color: #06c5a6;
color:#c52206;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
//border: 1px solid rgba(6,153,184,0.3);
border: 1px solid rgba(184, 6, 6, 0.3);
}
.mytext{
border:0;padding:10px;background:whitesmoke;
position: fixed;
/*margin: 10px;*/
height: 4%;
width: 15%;
/*margin: 67px 0px 0px -57px;*/
margin: 5px 0px 0px -11px;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:372px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:32px;
display:flex;
flex-direction: column;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
.a{
/*margin-top: 199px;*/
float: right;
}
.boutonHourely{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
color: #06c5a6;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(6,153,184,0.3);
}
.text_chat1{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
}
#output{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
.bt{
width: 30px;
}
.output:before {
width: 0;
height: 0;
content: "";
top: -5px;
left: -14px;
position: relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.logo-bule{
width: 50px;
height:50px;
border-radius: 40px;
/*float: right;*/
position: fixed;
right: 6%;
bottom: 0px;
}
.logo-bule:after{
/* position:relative;
float:right;
bottom:0px;*/
}
.chattt{
margin-top: 6.3%;
overflow-y: scroll;
}
.output2,.output4,.output5, .output7, .output9, .aaa{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output3{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
.output5{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output6, .output8, .output10{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
Thank you

The problem with this approach is, the inserted element is also <div>. Give a unique way of identification for the master <div>.
$("#btn2").click(function(){
$("body > div").append("<div>Appended item</div>");
});
For this current example, I have used body > div selector, as the <div> is directly under <body>. The better way is to use a class for the <div> and use this way:
<div class="master"></div>
$("#btn2").click(function(){
$(".master").append("<div>Appended item</div>");
});
Full Code
$(document).ready(function() {
$("#btn2").click(function() {
$("body > div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>