Develop Reference

disabling form submit in html and css only

I am adding a code block to a page where all js is disabled and stripped out. I want to add a recaptcha to a form to cut down on spam. I've nearly got it, but can't get it to work.
My questions are:
The js code I am using to validate the required fields gets stripped. Is there any way to put the validation back in without using js?
I can't figure out how to connect the enable submit to the recapthca checkbox.
Here's the code as far as I've got it to work...
<!-- Note :
- You can modify the font style and form style to suit your website.
- Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code.
- The Mandatory check script can modified as to suit your business needs.
- It is important that you test the modified form before going live.-->
<div id='crmWebToEntityForm' class='zcwf_lblLeft crmWebToEntityForm' style='background-color: white;color: black;max-width: 600px;'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<META HTTP-EQUIV ='content-type' CONTENT='text/html;charset=UTF-8'>
<form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads2983403000000507130 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory2983403000000507130()' accept-charset='UTF-8'>
<input type='text' style='display:none;' name='xnQsjsdp' value='d8a8809b8fe787eb5f1520e8345aa1f4461cf539b2b1505c31cd3765336f8089'></input>
<input type='hidden' name='zc_gad' id='zc_gad' value=''></input>
<input type='text' style='display:none;' name='xmIwtLD' value='da656ccd402f059702a554831941786995278d8da723e570a30ed6c9d5d4a5b5'></input>
<input type='text' style='display:none;' name='actionType' value='TGVhZHM='></input>
<input type='text' style='display:none;' name='returnURL' value='https://www.monkeytronics.co.nz/' > </input>
<!-- Do not remove this code. -->
<style>
/* <!-- Stick in a recaptcha --> */
body {
margin:0;
background-image:url(https://cdn.theculturetrip.com/wp-content/uploads/2020/08/gettyimages-904801296.jpg);
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
font-family: 'Roboto', sans-serif;
}
.captcha {
background-color:#f9f9f9;
border:2px solid #d3d3d3;
border-radius:10px;
color:#4c4a4b;
display:flex;
justify-content:center;
align-items:center;
}
#media screen and (max-width: 500px) {
.captcha {
flex-direction:column;
}
.text {
margin:.5em!important;
text-align:center;
}
.logo {
align-self: center!important;
}
.spinner {
margin:2em .5em .5em .5em!important;
}
}
.text {
font-size:1em;
font-weight:500;
margin-right:1em;
}
.spinner {
position:relative;
width:2em;
height:2em;
display:flex;
margin:2em 1em;
align-items:center;
justify-content:center;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+.checkmark {
display:inline-block;
width:2em;
height:2em;
background-color:#fcfcfc;
border:2.5px solid #c3c3c3;
border-radius:3px;
display:flex;
justify-content:center;
align-items:center;
cursor: pointer;
}
input[type="checkbox"]+.checkmark span {
content:'';
position:relative;/*
position:absolute;
border-bottom:3px solid;
border-right:3px solid;
border-color:#029f56;*/
margin-top:-3px;
transform:rotate(45deg);
width:.75em;
height:1.2em;
opacity:0;
}
input[type="checkbox"]+.checkmark>span:after {
content:'';
position:absolute;
display:block;
height:3px;
bottom:0;left:0;
background-color:#029f56;
}
input[type="checkbox"]+.checkmark>span:before {
content:'';
position:absolute;
display:block;
width:3px;
bottom:0;right:0;
background-color:#029f56;
}
input[type="checkbox"]:checked+.checkmark {
animation:2s spin forwards;
}
input[type="checkbox"]:checked+.checkmark>span {
animation:1s fadein 1.9s forwards;
}
input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}
input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}
#keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}
}
#keyframes bottomslide {
0% {width:0;}
100% {width:100%;}
}
#keyframes rightslide {
0% {height:0;}
100% {height:100%;}
}
.logo {
display:flex;
flex-direction:column;
align-items:center;
height:100%;
align-self:flex-end;
margin:0.5em 1em;
}
.logo img {
height:2em;
width:2em;
}
.logo p {
color:#9d9ba7;
margin:0;
font-size:1em;
font-weight:700;
margin:.4em 0 .2em 0;
}
.logo small {
color:#9d9ba7;
margin:0;
font-size:.8em;
}
#keyframes spin {
10% {
width:0;
height:0;
border-width:6px;
}
30% {
width:0;
height:0;
border-radius:50%;
border-width:1em;
transform: rotate(0deg);
border-color:rgb(199,218,245);
}
50% {
width:2em;
height:2em;
border-radius:50%;
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
70% {
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
90% {
border-width:4px;
}
100% {
width:2em;
height:2em;
border-radius:50%;
transform: rotate(720deg);
border-color:transparent;
}
}
::selection {
background-color:transparent;
color:teal;
}
::-moz-selection {
background-color:transparent;
color:teal;
}
html,body{
margin: 0px;
}
#crmWebToEntityForm.zcwf_lblLeft {
width:100%;
padding: 25px;
margin: 0 auto;
box-sizing: border-box;
}
#crmWebToEntityForm.zcwf_lblLeft * {
box-sizing: border-box;
}
#crmWebToEntityForm{text-align: left;}
#crmWebToEntityForm * {
direction: ltr;
}
.zcwf_lblLeft .zcwf_title {
word-wrap: break-word;
padding: 0px 6px 10px;
font-weight: bold;
}
.zcwf_lblLeft .zcwf_col_fld input[type=text], .zcwf_lblLeft .zcwf_col_fld textarea {
width: 60%;
border: 1px solid #ccc;
resize: vertical;
border-radius: 2px;
float: left;
}
.zcwf_lblLeft .zcwf_col_lab {
width: 30%;
word-break: break-word;
padding: 0px 6px 0px;
margin-right: 10px;
margin-top: 5px;
float: left;
min-height: 1px;
}
.zcwf_lblLeft .zcwf_col_fld {
float: left;
width: 68%;
padding: 0px 6px 0px;
position: relative;
margin-top: 5px;
}
.zcwf_lblLeft .zcwf_privacy{padding: 6px;}
.zcwf_lblLeft .wfrm_fld_dpNn{display: none;}
.dIB{display: inline-block;}
.zcwf_lblLeft .zcwf_col_fld_slt {
width: 60%;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
font-size: 16px;
float: left;
resize: vertical;
}
.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after {
content: '';
display: table;
clear: both;
}
.zcwf_lblLeft .zcwf_col_help {
float: left;
margin-left: 7px;
font-size: 16px;
max-width: 35%;
word-break: break-word;
}
.zcwf_lblLeft .zcwf_help_icon {
cursor: pointer;
width: 16px;
height: 16px;
display: inline-block;
background: #fff;
border: 1px solid #ccc;
color: #ccc;
text-align: center;
font-size: 14px;
line-height: 16px;
font-weight: bold;
border-radius: 50%;
}
.zcwf_lblLeft .zcwf_row {margin: 15px 0px;}
.zcwf_lblLeft .formsubmit {
margin-right: 5px;
cursor: pointer;
color: #333;
font-size: 16px;
}
.zcwf_lblLeft .zcwf_privacy_txt {
color: rgb(0, 0, 0);
font-size: 16px;
font-family: Arial;
display: inline-block;
vertical-align: top;
color: #333;
padding-top: 2px;
margin-left: 6px;
}
.zcwf_lblLeft .zcwf_button_submit {
font-size: 16px;
color: #00C3E8;
border: 2px solid #00C3E8;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_button {
font-size: 16px;
color: #333;
border: 2px solid #ccc;
padding: 10px 23px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_tooltip_over{
position: relative;
}
.zcwf_lblLeft .zcwf_tooltip_ctn{
position: absolute;
background: #dedede;
padding: 3px 6px;
top: 3px;
border-radius: 4px;word-break: break-all;
min-width: 50px;
max-width: 150px;
color: #333;
}
.zcwf_lblLeft .zcwf_ckbox{
float: left;
}
.zcwf_lblLeft .zcwf_file{
width: 55%;
box-sizing: border-box;
float: left;
}
.clearB:after{
content:'';
display: block;
clear: both;
}
#media all and (max-width: 600px) {
.zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld {
width: auto;
float: none !important;
}
.zcwf_lblLeft .zcwf_col_help {width: 40%;}
}
</style>
<div class='zcwf_title' style='font-size:20px; max-width: 600px;color: #00C3E8;'>Contact Monkeytronics</div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='First_Name'>First Name</label></div><div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Last_Name'>Last Name<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Email'>Email<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Company'>Company<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Description'>How can we help?<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab'></div><div class='zcwf_col_fld'><input type='submit' id='formsubmit' class='formsubmit zcwf_button_submit' value='Submit' title='Submit'><input type='reset' class='zcwf_button' name='reset' value='Reset' title='Reset'></div></div>
<div class="captcha">
<div class="spinner">
<label>
<input type="checkbox" onclick="$(this).attr('disabled','disabled');">
<span class="checkmark"><span> </span></span>
</label>
</div>
<div class="text">
I'm not a robot
</div>
<div class="logo">
<img src="https://forum.nox.tv/core/index.php?media/9-recaptcha-png/"/>
<p>reCAPTCHA</p>
<small>Privacy - Terms</small>
</div>
</div>
<script>
function validateEmail2983403000000507130()
{
var form = document.forms['WebToLeads2983403000000507130'];
var emailFld = form.querySelectorAll('[ftype=email]');
var i;
for (i = 0; i < emailFld.length; i++)
{
var emailVal = emailFld[i].value;
if((emailVal.replace(/^\s+|\s+$/g, '')).length!=0 )
{
var atpos=emailVal.indexOf('#');
var dotpos=emailVal.lastIndexOf('.');
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=emailVal.length)
{
alert('Please enter a valid email address. ');
emailFld[i].focus();
return false;
}
}
}
return true;
}
function checkMandatory2983403000000507130() {
var mndFileds = new Array('Company','Last Name','Email','Description');
var fldLangVal = new Array('Company','Last Name','Email','How can we help?');
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads2983403000000507130'][mndFileds[i]];
if(fieldObj) {
if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
if(fieldObj.type =='file')
{
alert('Please select a file to upload.');
fieldObj.focus();
return false;
}
alert(fldLangVal[i] +' cannot be empty');
fieldObj.focus();
return false;
} else if(fieldObj.nodeName=='SELECT') {
if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
alert(fldLangVal[i] +' cannot be none');
fieldObj.focus();
return false;
}
} else if(fieldObj.type =='checkbox'){
if(fieldObj.checked == false){
alert('Please accept '+fldLangVal[i]);
fieldObj.focus();
return false;
}
}
try {
if(fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {}
}
}
if(!validateEmail2983403000000507130()){return false;}
document.querySelector('.crmWebToEntityForm .formsubmit').setAttribute('disabled', true);
}
function tooltipShow2983403000000507130(el){
var tooltip = el.nextElementSibling;
var tooltipDisplay = tooltip.style.display;
if(tooltipDisplay == 'none'){
var allTooltip = document.getElementsByClassName('zcwf_tooltip_over');
for(i=0; i<allTooltip.length; i++){
allTooltip[i].style.display='none';
}
tooltip.style.display = 'block';
}else{
tooltip.style.display='none';
}
}
</script>
</form>
</div>

You can try using required on input elements in the form,
for the captcha you should add some functionality when you click on submit you should check if the captcha checkbox was clicked (right now theres some jquery code on it but you dont have jquery on your web)

Use the disabled attribute!
Here is an example:
<form> <input type = "submit" disabled="disabled">Submit</input></form>
Using this will grey-out the button!

Javascript localStorage replaces data instead of appending data to the existing ones

I want to make new div's with localStorage. It is working good except when I reload the page and click again to the bag button, the div's which I have made previously get replaced by the new ones. I want it to add new div's after the previously added div's. Any answers will be appreciated! Thank you so much!
var addtobagbtn = document.getElementsByClassName('ovla-addtobag');
var tles = document.getElementsByClassName('prod-title');
for ( i = 0; i <addtobagbtn.length; i++) {
var button = addtobagbtn[i];
button.addEventListener('click', function() {
var button = event.target;
var shopitem = button.parentElement.parentElement;
var bagitems = document.getElementsByClassName('bagitems')[0];
var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src;
appendbag();
function add(imgsrc) {
bagitems.insertAdjacentHTML("afterbegin",`<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div>
`)
}
function appendbag() {
add(imgsrc);
localStorage.setItem("getbag",JSON.stringify( bagitems.innerHTML));
}
});
}
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap');
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 255, 255);
width:100%;
margin:0;
padding:0;
}
/*product patge wrapper*/
.signup-banner{
text-transform: uppercase;
position: relative;
padding:20px 0px;
background-color: rgb(211, 210, 210);
text-align: center;
font-family: 'Dosis',sans-serif;
text-emphasis: 10;
}
.banfrm{
display:inline-block;
margin:10px;
}
.banbtn{
background-color: #1a1a1a;
color:rgb(184, 184, 184);
width:100px;
height:30px;
border:none;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.prdpg-wrapper{
grid-area: pdwr;
display:grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"prodgrid prodgrid prodgrid prodgrid prodgrid"
;
}
/*product page wrapper ends*/
/*leftbar*/
.prdpg-lftbar::-webkit-scrollbar{
width:2px;
}
.prdpg-lftbar::-webkit-scrollbar-thumb{
background-color: #777777;
border-radius: 2px 0px;
-webkit-border-radius: 2px 0px;
-moz-border-radius: 2px 0px;
-ms-border-radius: 2px 0px;
-o-border-radius: 2px 0px;
}
.prdpg-lftbar{
position:fixed;
padding:200px 10px 0px 30px;
grid-area: lftbar;
display:none;
height:100%;
background-color: #fff;
z-index:1;
top:60px;
}
.prdpg-lftbar:hover{
overflow:scroll;
}
.lftbarul{
list-style:none;
}
.super-menuli-lftbar-title{
font-family:'Dosis',sans-serif;
font-weight: bold;
font-size:14px;
}
.super-menuli-lftbar{
font-size:14px;
}
.super-lftbar-menua{
text-decoration:none;
color:rgb(59, 59, 59);
font-family:'Dosis',sans-serif;
}
/*left bar ends*/
/*prod-grid*/
.prod-grid{
grid-area: prodgrid;
display:grid;/*
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));*/
grid-template-columns: repeat(2,48%);
grid-template-rows:auto;
grid-auto-flow:row;
grid-gap:10px;
justify-content: center;
align-items:center;
}
#media screen and (max-width:319px){
.prod-grid{
grid-template-columns: repeat(1,95%);
}
}
#media screen and (min-width:768px){
.prod-grid{
grid-template-columns: repeat(3,33%);
}
}
#media screen and (min-width:1024px){
.prod-grid{
grid-template-columns: repeat(4,24%);
}
}
.prod-img{
width:100%;
cursor: pointer;
width:100%;
}
.prod-card{
width:100%;
display:block;
}
.prod-head{
position:relative;
}
.prod-info{
width:100%;
}
.prod-titlea{
color:#1a1a1a;
text-decoration:none;
}
.prod-titlea:hover{
color:#6a6a6a;
text-decoration: underline;
}
/*card design*/
.ovla-fav{
outline:none;
border:none;
position:absolute;
background-color: #fff;
bottom:15px;
right:15px;
width:30px;
height:30px;
border-radius:50%;
cursor:pointer;
box-shadow: 0px 0px 4px #000;
font-size:16px;color:#ed4956;
}
#fav-saved{
position:absolute;
top:9px;
right:8px;
z-index: -1;
color: #ed4956;
}
.ovla-addtobag{
outline:none;
border:none;
position:absolute;
background-color: #fff;
bottom:50px;
right:15px;
width:30px;
height:30px;
text-align: center;
line-height:25px;
border-radius:50%;
cursor:pointer;
color: #3a3a3a;
box-shadow: 0px 0px 4px #000;
font-size:16px;
transition: visibility .1s ease;
-webkit-transition: visibility .1s ease;
-moz-transition: visibility .1s ease;
-ms-transition: visibility .1s ease;
-o-transition: visibility .1s ease;
}
.prod-img:hover ~ .ovla-addtobag{
visibility:visible;
}
.ovla-addtobag:hover{
visibility:visible;
}
.prod-leg{
position: relative;
text-align:center;
}
.prod-title{
font-family:'Dosis',sans-serif;
font-size:1rem;
}
.prod-price{
font-family:'Dosis',sans-serif;
}
/*prod hover elements*/
.fa-plus{
position:absolute;
top:11px;
left:9px;
color:#fff;
font-size:.5rem;
}
.btmbtn{
margin-top:15px;
height:30px;
width:50%;
border:none;
background-color: #1a1a1a;
color:rgb(180, 180, 180);
cursor:pointer;
border-radius:2px;
outline:none;
font-family:'Dosis',sans-serif;
text-align:center;
line-height:30px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
}
.btmbtn:hover{
background-color: #2a2a2a;
}
.btmbtn:active{
background-color: #2a2a2a;
}
/*prod hover elements ends*/
/*card design ends*/
/*prod grid-ends*/
/*media queries*/
#media screen and (min-width:1024px){
.ovla-addtobag{
visibility:hidden;
}
.signup-banner{
margin:20px 1px;
padding:100px 200px;
right:-20.5%;
width:78.7%;
}
.prdpg-wrapper{
display:grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"lftbar prodgrid prodgrid prodgrid prodgrid"
;
}
.prdpg-lftbar{
display:block;
}
}
/*media queries ends*/
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap');
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 255, 255);
width:100%;
margin:0;
padding:0;
}
/*global variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variable*/
.bag-wrapper{
position:relative;
display:grid;
grid-template-columns: 100%;
grid-template-rows: auto;
margin-left:1rem;
}
.bagpgtitle{
width:100%;
font-family: 'Dosis',sans-serif;
text-align:center;
font-size: 40px;
font-weight:bolder;
padding:20px;
}
.bagrow{
display:grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr .8fr;
grid-template-areas:
"baghd baghd"
" bagleg bagleg"
;
row-gap: 20px;
width:100%;
border-bottom:1px solid rgb(195, 195, 195);
margin-top:20px;
}
.bagrowhead{
grid-area:baghd;
width:150px;
position:relative;
padding:5px;
}
.bagprdimg{
width:100%;
}
.bagprdtitle{
font-weight:bold;
}
.dltbag{
float:right;
font-size:20px;
padding:2px;
background-color: #fff;
color: #adadad;
border:none;
margin-top:2px;
margin-right:5px;
outline:none;
}
.dltbag:hover{
color:#fd4141 ;
}
.movetofavbtn{
border:none;
font-size:1rem;
padding:6px;
background-color: #fff;
outline:none;
color:#ed4956;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.movetofavbtn:hover{
background-color: #ffcace;
}
.bagrowleg{
grid-area:bagleg;
font-family:'Dosis',sans-serif;
}
.indbagqty{
width:60px;
border:none;
border-bottom:1px solid #ccc;
font-family: 'Dosis',sans-serif;
}
.indbagtotalprice{
border:none;
border-bottom:1px solid #ccc;
width:60px;
font-family:'Dosis',sans-serif;
}
.bagbuy{
padding:3rem 1rem 1rem 0rem;
}
.bagbuytitle{
font-family: 'Dosis',sans-serif;
font-size:20px;
font-weight: bold;
color: #424242;
padding-bottom:15px;
}
.bagnav{
padding:10px 0;
justify-content:space-between;
font-family:'Dosis',sans-serif;
}
.bagchk{
width:100px;
float:right;
margin-right:10px;
text-align:right;
font-family:'Dosis',sans-serif;
border:none;
}
.bagchkoutbtn{
background-color: #525252;
width:100%;
height:50px;
float:center;
text-transform: uppercase;
font-family:'Dosis',sans-serif;
font-synthesis: style;
letter-spacing: 2px;
border:none;
color: #ccc;
margin-top:20px;
}
/*media queries*/
#media screen and (min-width:500px){
.bagrow{
width:50%;
}
}
#media screen and (min-width:768px){
.bagrow{
display:flex;
}
.bagrowhead{
width:160px;
}
.bagbuy{
position:fixed;
background-color: rgb(255, 255, 255);
right:18%;
top:190px;
width:35%;
padding: 50px;
overflow:scroll;
height:100%;
word-wrap: wrap;
}
.bagbuy::-webkit-scrollbar{
visibility: none;;
}
}
#media screen and (min-width:1024px){
.bagrow{
width:30%;
display:flex;
}
.rmvbagrow{
margin:0;
padding:0;
}
}
#media (min-width:767px) and (max-width:769px){
.bagrowbtnbr{
display:block;
}
.bagrowfld{
float:right;
}
.rowtotalprice{
}
.clstot{
margin-top:10px;
}
}
<!DOCTYPE html>
<html>
<body>
Go To Get
<div class="prod-grid">
<div class="prod-card">
<div class="prod-head" id="prod-head" name="prod-head">
<img class="prod-img" id="prod-img" name="prod-img" src="https://lp2.hm.com/hmgoepprod?set=source[/05/0e/050e2b9f736cc7d1b9c0599dd988609a535e0e0f.jpg],origin[dam],category[ladies_jeans_slim],type[LOOKBOOK],res[y],hmver[3]&call=url[file:/product/main]">
<button class="far fa-heart ovla-fav" id="ovla-fav" ></button>
<button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button>
</div>
<div class="prod-leg"><a href="#" class="prod-titlea">
<h6 class="prod-title">Sweatshirt shorts</h6></a>
<p class="prod-price" id="prod-price">£8.99</p>
<!--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>-->
</div>
</div>
<div class="prod-card">
<div class="prod-head" id="prod-head" name="prod-head">
<img class="prod-img" id="prod-img" name="prod-img" src="https://lp2.hm.com/hmgoepprod?set=source[/d0/4f/d04fe64b84c228bd56365f2d5890e050b9f32475.jpg],origin[dam],category[],type[DESCRIPTIVESTILLLIFE],res[y],hmver[1]&call=url[file:/product/main]">
<button class="far fa-heart ovla-fav" id="ovla-fav" ></button>
<button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button>
</div>
<div class="prod-leg"><a href="#" class="prod-titlea">
<h6 class="prod-title">Sweatshirt shorts</h6></a>
<p class="prod-price" id="prod-price">£8.99</p>
<!--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>-->
</div>
</div>
<div class="prod-card">
<div class="prod-head" id="prod-head" name="prod-head">
<img class="prod-img" id="prod-img" name="prod-img" src="https://lp2.hm.com/hmgoepprod?set=source[/7b/de/7bde5d2b5538c9584e5a8a48b73bbca8950c3c70.jpg],origin[dam],category[ladies_jeans_highwaisted],type[LOOKBOOK],res[y],hmver[1]&call=url[file:/product/main]">
<button class="far fa-heart ovla-fav" id="ovla-fav" ></button>
<button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button>
</div>
<div class="prod-leg"><a href="#" class="prod-titlea">
<h6 class="prod-title">Sweatshirt shorts</h6></a>
<p class="prod-price" id="prod-price">£8.99</p>
<!--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>-->
</div>
</div>
</div>
<!--This is where the div is created !!!!!!!!!!!!-->
<div class="bagitems"></div>
<!--script area !!!!!!!!!! !!!!!!!! !!!!!!!!! !!!!-->
<script src="get.js"></script>
<script>
var saved = document.write(JSON.parse(localStorage.getItem('getbag')));
if (saved) {
bagitems.innerHTML = saved;
}
</script>
</body>
</html>

I have tested this on my local and I guess the following fix is what you're looking for
var addtobagbtn = document.getElementsByClassName('ovla-addtobag');
var tles = document.getElementsByClassName('prod-title');
for (i = 0; i < addtobagbtn.length; i++) {
var button = addtobagbtn[i];
button.addEventListener('click', function() {
var button_target = event.target;
var shopitem = button_target.parentElement.parentElement;
var bagitems = document.getElementsByClassName('bagitems')[0];
var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src;
appendbag(imgsrc, bagitems);
});
}
function add(imgsrc, bagitems) {
bagitems.insertAdjacentHTML("afterbegin", `<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div>`);
}
function appendbag(imgsrc, bagitems) {
add(imgsrc, bagitems);
localStorage.setItem("getbag", JSON.stringify(bagitems.innerHTML));
}
The problem was you were using the variable name "button" twice in same scope and wrote the functions add() and appendbag() inside for loop. They should be outside the loop.

Input text for username and password is not showing in Firefox

I've been building login form and everything went great, until i opened up Firefox and try it on. The text you input is not even showing like in Chrome and IE.
Anyway here is the CSS i've been using for login:
#login-wrapper{
display:none;
overflow:hidden;
text-align:left;
color:#fff;
background-color:#378f90
}
#login-wrapper .item-list,#login-wrapper h2,#login-wrapper label{
display:none
}
#login-wrapper #edit-actions,#login-wrapper .form-actions,#login-wrapper .form-item{
margin:0
}
#login-wrapper input,#login-wrapper input:focus,#login-wrapper textarea,#login-wrapper textarea:focus{
margin:1.25rem 0;
padding:1.875rem 0 2.5rem;
line-height:1.75rem;
font-size:1.5rem;
font-weight:300;
color:#fff;
background-color:transparent;
border:none;
border-bottom:1px solid #fff;
box-shadow:none;
resize:none
}
#login-wrapper textarea,#login-wrapper textarea:focus{
padding-bottom:1.25rem;
padding-top:.9375rem
}
#login-wrapper input.placeholder,#login-wrapper input:focus.placeholder,#login-wrapper textarea.placeholder,#login-wrapper textarea:focus.placeholder{
color:#fff
}
#login-wrapper input:-moz-placeholder,#login-wrapper input:focus:-moz-placeholder,#login-wrapper textarea:-moz-placeholder,#login-wrapper textarea:focus:-moz-placeholder{
color:#fff
}
#login-wrapper input::-moz-placeholder,#login-wrapper input:focus::-moz-placeholder,#login-wrapper textarea::-moz-placeholder,#login-wrapper textarea:focus::-moz-placeholder{
color:#fff
}
#login-wrapper input:-ms-input-placeholder,#login-wrapper input:focus:-ms-input-placeholder,#login-wrapper textarea:-ms-input-placeholder,#login-wrapper textarea:focus:-ms-input-placeholder{
color:#fff
}
#login-wrapper input::-webkit-input-placeholder,#login-wrapper input:focus::-webkit-input-placeholder,#login-wrapper textarea::-webkit-input-placeholder,#login-wrapper textarea:focus::-webkit-input-placeholder{
color:#fff
}
#login-wrapper textarea{
overflow:hidden;
word-wrap:break-word
}
#login-wrapper input[type=submit]{
float:right;
display:table-cell;
vertical-align:middle;
margin:1.25rem 0;
padding:0 0 0 1.25rem;
width:4.375rem;
height:4.375rem;
line-height:1.5625rem;
font-size:1rem;
font-weight:500;
text-align:left;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-image:url(../images/icon-login-big.jpg);
cursor:pointer;
-webkit-border-radius:.1875rem;
-moz-border-radius:.1875rem;
border-radius:.1875rem
}

I think this issue only because of #login-wrapper to display: none
I have updated code on fiddle
#login-wrapper{
/* display:none;*/
overflow:hidden;
text-align:left;
color:#fff;
background-color:#378f90
}
#login-wrapper .item-list,#login-wrapper h2,#login-wrapper label{
display:none
}
#login-wrapper #edit-actions,#login-wrapper .form-actions,#login-wrapper .form-item{
margin:0
}
#login-wrapper input,#login-wrapper input:focus,#login-wrapper textarea,#login-wrapper textarea:focus{
margin:1.25rem 0;
padding:1.875rem 0 2.5rem;
line-height:1.75rem;
font-size:1.5rem;
font-weight:300;
color:#fff;
background-color:transparent;
border:none;
border-bottom:1px solid #fff;
box-shadow:none;
resize:none
}
#login-wrapper textarea,#login-wrapper textarea:focus{
padding-bottom:1.25rem;
padding-top:.9375rem
}
#login-wrapper input.placeholder,#login-wrapper input:focus.placeholder,#login-wrapper textarea.placeholder,#login-wrapper textarea:focus.placeholder{
color:#fff
}
#login-wrapper input:-moz-placeholder,#login-wrapper input:focus:-moz-placeholder,#login-wrapper textarea:-moz-placeholder,#login-wrapper textarea:focus:-moz-placeholder{
color:#fff
}
#login-wrapper input::-moz-placeholder,#login-wrapper input:focus::-moz-placeholder,#login-wrapper textarea::-moz-placeholder,#login-wrapper textarea:focus::-moz-placeholder{
color:#fff
}
#login-wrapper input:-ms-input-placeholder,#login-wrapper input:focus:-ms-input-placeholder,#login-wrapper textarea:-ms-input-placeholder,#login-wrapper textarea:focus:-ms-input-placeholder{
color:#fff
}
#login-wrapper input::-webkit-input-placeholder,#login-wrapper input:focus::-webkit-input-placeholder,#login-wrapper textarea::-webkit-input-placeholder,#login-wrapper textarea:focus::-webkit-input-placeholder{
color:#fff
}
#login-wrapper textarea{
overflow:hidden;
word-wrap:break-word
}
#login-wrapper input[type=submit]{
float:right;
display:table-cell;
vertical-align:middle;
margin:1.25rem 0;
padding:0 0 0 1.25rem;
width:4.375rem;
height:4.375rem;
line-height:1.5625rem;
font-size:1rem;
font-weight:500;
text-align:left;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-image:url(../images/icon-login-big.jpg);
cursor:pointer;
-webkit-border-radius:.1875rem;
-moz-border-radius:.1875rem;
border-radius:.1875rem
}
<div id="login-wrapper">
<div>
<input type="text" value="test" />
</div>
<div>
<textarea>test area</textarea>
</div>
</div>

I just need to change
from:
padding:1.875rem 0 2.5rem;
to:
padding:1.875rem 1 2.5rem;
Thank you for support :)

jQuery DatePicker : Multiple input giving an error

I am using jQuery DatePicker plugin.
Functionality
Currently I am working on one form which is having table and users are allowed to add rows into that table by clicking button. Working very well.
Now I want to implement the DatePicker plugin so that user can add date by just click.
ISSUE
Currently I am facing an issue that when User adds a row, datepicker stop working. I am using class so that it should not create an issue.
What I have Tried is destroying datepicker instance when user adds new row but doing that giving me an error
Uncaught TypeError: Cannot read property 'append' of undefined
I tried on google but none of them were relevant to my issue regarding this error.
Can anyone help me in this ?
( function( $ ) {
//Add Row
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 5){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Currently You can add only up to 5 Exams.");
}
}
//Delete Row
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all fields.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
$( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );
$(".add_").click(function(){
addRow('dataTable');
$(".datepicker").datepicker("destroy");
//$( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );
//alert("Alert");
});
} )( jQuery );
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #373C40;
font-family: Verdana,Arial, Helvetica, sans-serif;
height: 100%;
background-color: #f0f0f0;
margin:10px;
}
body {
font-size: 70%;
}
p {
padding: 7px 0 7px 0;
font-weight: 500;
font-size: 10pt;
}
a {
color: #656565;
text-decoration:none;
}
a:hover{
color: #4C99CC;
text-decoration: none;
}
h1 {
font-weight:200;
color: #888888;
font-size:16pt;
padding-left:33px;
margin:8px ;
}
.clear{
width:100%;
float:none;
clear:both;
}
form.register{
width:800px;
margin: 20px auto 0px auto;
background-color:#fff;
padding:5px;
}
form p{
font-size: 8pt;
clear:both;
margin: 0;
color:gray;
padding:4px;
}
fieldset.row1{
width:100%;
padding:5px;
float:left;
border-top:1px solid #F5F5F5;
margin-bottom:15px;
}
fieldset.row2{
border-top:1px solid #F1F1F1;
border-right:1px solid #F1F1F1;
padding:5px;
float:left;
min-height:220px;
}
fieldset.row3{
border-top: 1px solid #F1F1F1;
padding: 5px;
float: left;
margin-bottom: 15px;
width: 159px;
}
fieldset.row4,fieldset.row5{
border-top:1px solid #F1F1F1;
border-right:1px solid #F1F1F1;
padding:5px;
float:left;
clear:both;
}
fieldset.row5{
width:100%;
}
.register .form label{
float: left;
text-align: left;
margin-right: 5px;
margin-top:2px;
width:auto;
}
.register .form input{
width:100px;
}
.form td{
border-right:1px solid #F1F1F1;
border-top:1px solid #F1F1F1;
border-bottom:1px solid #F1F1F1;
border-left:0px solid #F1F1F1;
padding:2px;
margin:0;
}
.register legend{
color: #4C99CC;
padding:2px;
margin-left: 14px;
font-weight:bold;
font-size: 14px;
font-weight:100;
}
.register label{
color:#444;
width:100px;
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
}
form.register label.optional{
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
color: #A3A3A3;
}
form.register label.obinfo{
float:right;
padding:3px;
font-style:italic;
}
form.register input{
width: 140px;
color: #505050;
float: left;
margin-right: 5px;
}
form.register input.long{
width: 247px;
color: #505050;
}
form.register input.short{
width: 40px;
color: #505050;
}
form.register input[type=radio]{
float:left;
width:15px;
}
form.register label.gender{
margin-top:-1px;
margin-bottom:2px;
width:34px;
float:left;
text-align:left;
line-height:19px;
}
form.register input[type=text]{
border: 1px solid #E1E1E1;
height: 18px;
}
form.register input[type=password]{
border: 1px solid #E1E1E1;
height: 18px;
}
form.register input[type=button]:hover{
cursor:pointer;
background:#ccc;
}
form.register .submit{
color: #fff;
cursor: pointer;
float:left;
margin:10px;
padding:5px;
background: #4C99CC;
background-image: linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
background-image: -ms-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0, 0, 0, 0.1)),color-stop(1,rgba(255, 255, 255, 0.1)));
}
form.register .submit:hover{
background:#505050;
}
form.register .submit:active{
background:#ccc;
color: #000;
}
form.register input[type=text].small{
border: 1px solid #E1E1E1;
height: 18px;
width:75px;
}
form.register input[type=checkbox] {
width:34px;
margin-top:4px;
}
form.register select{
border: 1px solid #E1E1E1;
float:left;
margin-bottom:3px;
color: #505050;
margin-right:5px;
}
input:focus, select:focus{
background-color: #F1F1F1;
}
p.info{
font-size:7pt;
color: gray;
}
p.agreement{
margin-left:15px;
}
p.agreement label{
width:390px;
text-align:left;
margin-top:3px;
}
<form class="register" method="post" action="">
<p>
<input type="button" class="add_" value="Add Fields" />
<input type="button" class="add_" value="Remove All Added Fields" onClick="deleteRow('dataTable')" /> <!-- onClick="addRow('dataTable')" deleteRow('dataTable') -->
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Chapter</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
<td>
<label for="BX_date">Date</label>
<input type="text" required="required" class="small datepicker" name="BX_date[]" id="datepicker">
</td>
<td>
<label for="BX_gender">Gender</label>
<select id="BX_gender" name="BX_gender" required="required">
<option>....</option>
<option>Male</option>
<option>Female</option>
</select>
</td>
</p>
</tr>
</tbody>
</table>
<input type="submit" value="Save" class="submit" />
</form>
SOLVED
Solved by re ordering the code line when user adds row.
$(".datepicker").datepicker("destroy");
addRow('dataTable');
$( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );
NEW ISSUE
New issue now I am facing is, it is adding the date to only 1st input no matter from which input box I am adding the date.
What might be the solution for this ?

For dynamically added datepickers best way to do it something like this instead
$('body').on('focus', '.datepicker', function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' } );
}).on('click', '.datepicker', function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' } );
});
Also, you are using same id for multiple inputs.
Here is a demo
Hope this helps.

ul li nested class jquery hover

I am trying to add mouse hover effect to a list having nested classes but no luck so far even after spending so many hours.
HTML:
<div class="pricing-wrap">
<ul class="pricing_main">
<li class="pricing pricing_three main">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
<li class="pricing pricing_three normal">
<h2>Used Containers</h2>
.....
</li>
</ul>
</div>
...and here is the jquery I am trying to use for mouse hover
JQUERY:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pricing-wrap ul.pricing_main").hover(function () {
jQuery(this).find('li.pricing_three').addClass("main");
},
function () {
jQuery(this).find('li.pricing_three').removeClass("normal");
}
);
});
</script>
CSS:
.pricing-wrap{
overflow:hidden;
width:100%;
margin:20px 0 30px 0;
float:left;
}
.pricing_main{
overflow:hidden;
float:none;
margin:0 0 0 0;
width:100.5%;
padding:7px 0;
font-family:Arial, Helvetica, sans-serif !important;
}
li.pricing{
padding:0;
margin:20px 0 20px -1px;
float:left;
text-align:center !important;
border:1px solid #ddd;
position:relative;
}
li.main{
margin:0 0 0 -1px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index:1;
}
li.pricing:first-child{
margin-left:0;
}
li.pricing ul li{ padding:8px 0; margin:0 35px; border-top:1px dotted #eee;}
li.pricing ul li:first-child{border-top:none;}
li.pricing h2{
background:#ddd;
padding:10px 0;
margin:0;
font-size:20px;
border-bottom:1px solid #ddd;
font-weight:bold;
}
li.main h2{
background:#000;
color:#fff;
padding:21px 1px;
margin:-1px -1px 0 -1px;
border-bottom:none;
}
li.main{
border-color:#ccc;
}
.plan-head{ background:#f9f9f9; padding:20px 0 15px 0; border-bottom:1px solid #eee;}
.plan-price{ font-size:25pt; font-weight:bold; letter-spacing:-2px; line-height:1;}
.plan-bottom{ background:#f9f9f9; padding:15px 0; border-bottom:1px solid #eee;}
li.main .plan-bottom{padding:35px 0;}
.plan-bottom{ background:#f9f9f9; padding:25px 0; border-top:1px solid #eee;}
.plan-bottom a{ font-weight:bold; padding:8px 15px; background:#000; color:#fff !important; font-size:14px; opacity:.9}
li.main .plan-bottom a{padding:13px 22px; opacity:1}
.plan-bottom a:hover,
li.main .plan-bottom a:hover{}
li.pricing_three{
width:33%;
}
li.pricing_four{
width:24.7%;
}
You can check this live at www.modcansolutions.ca/#pricing
Any quick help will be appreciated.
Many thanks,
~ Dipak G.

jQuery(document).ready(function() {
jQuery(".pricing.pricing_three").hover(function() {
jQuery(this).addClass("main").removeClass("normal");
},
function() {
jQuery(this).removeClass("main");
});
});

your answer
jQuery(document).ready(function() {
jQuery(".pricing").hover(function () {
jQuery(this).addClass("main");
},
function () {
jQuery(this).removeClass("main");
}
);
});
or you can check jsfiddle