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!

JSON lookup style based on date YYYY.MM.DD

I have a web app with an EXPIRATION input date field in the format YYYY.MM.DD and am accessing a MEMBERS.JSON file. It's a look up with player's name as a key and returns the member's expiration date.
I want to add css.color to date field if the date is older than today, like "#FF0000", and "00FF00" if the same date is today or in the future.
Please see: http://communitychessclub.com/cccr-pairing/accountEXP.html
How can I do this, please?
$("#P46").on("blur", function(){
$("#X46").val(getExpireDate($(this).val()));
});
getExpireDate;
function getExpireDate(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return members[i].Expires;
}
}
return false;
};

You can change your parameter of getExpireDate . This parameter must be the current element instead of current value. In this way, inside your function you can get the element for wich you need to change the color:
$(ele).closest('.universal').find('.expDate')
Hence, change this line:
$("#P04").on("blur", function({$("#X04").val(getExpireDate($(this).val()));});
to:
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
In order to compare the dates I used momentjs library:
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
Now, your function becomes:
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
$(ele).closest('.universal').find('.expDate').css('color', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
I reduced your inputs to 'Attaya, Jim' and 'Tao, Patrick'.
var members = [{"Name": "Ahmed, Jamshed", "Expires": "2019.10.05"}, {
"Name": "Attaya, Jim",
"Expires": "2018.01.12"
}, {"Name": "Tao, Patrick", "Expires": "2016.08.01"}, {
"Name": "Tarwid, Jan",
"Expires": "2018.03.21"
}];
var players = [
"Attaya, Jim",
"Tao, Patrick",
];
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
$(ele).closest('.universal').find('.expDate').css('color', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
// Lookup date of expiration
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
$( ".automplete-2" ).autocomplete({delay: 0, source: window.players, minLength: 1, autoFocus: true});
body {background: #2E5363; font-family: Arial,Helvetica,sans-serif; letter-spacing:1px; color:#17263F; display: block;}
.container {display: flex; flex-direction: column; flex-wrap: nowrap; align-content:center; width:100%}
.box {width:100%; margin:auto;}
.easy-modal {display:none; }
.easy-modal, .easy-modal-animated {border-radius:1rem; position: relative; top: 15%; transform: translateY(-15%); font-size:1.3rem; width: 55%; font-align:justify; padding: 1rem 2rem; box-shadow: 1px 1px 3px rgba(0,0,0,0.35); background-color: tan; }
.arrow-right {display:inline; font-size:2rem; vertical-align:middle; color:#3F4749; font-weight:bold;}
#pairing {display:table; margin:0 auto; border-radius:2rem; padding:3rem 2rem; background:#ADC1C9; color:#F6FFDA; border:6px solid inherit; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); width:auto}
.ui-widget {font-family: Arial,Helvetica,sans-serif; font-size: 1.4em;}
.ui-autocomplete {z-index: 10000000;}
ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; letter-spacing:2px;}
input {background:inherit; text-align:left; color:#3A3D2E;}
input:focus {background: #AA9491; color:#3A3D2E;}
.glasnost {display:inline; text-align:left; margin:0; margin-right:2rem; background:inherit; font-size:1.5rem !important; border:none;
height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:normal; text-shadow: 1px 1px 1px #ccc;}
.glasnost input {display:inline-block; text-align:left; margin-right:2rem; background:#76B8D2; color:#294049; font-size:1.5rem; border:none !important; height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:bold; padding:0.5rem 1rem; overflow:ellipsis}
.glasnost input:focus {background:#80A994; color:#F5FCFF; text-align:left; font-weight:bold; overflow:ellipsis}
#total_recall {display:table; margin:2rem auto; margin-top:-1rem; color:#ABB6C8; background:#5D71C9; padding:1rem 2rem; font-size:1.75rem; font-weight:normal; border-radius:0.75rem;box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
#revenue_totals {margin-right:2rem; color:#F6FFDA}
#memberships {margin-right:0; color:#F6FFDA}
#entrance_fees {margin-right:2rem; color:#F6FFDA}
.cucumber {display:inline; color:#3F4749; text-align:right; float:left; margin-top:0.25rem; margin-right:0.5rem; margin-left:1.0rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.55rem; width:1.5rem; position:relative; top:0.25rem;}
.cucumber::after {content: ".";}
.player div input {display:inline}
/*
.rating {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#465D51; vertical-align:middle; }
.rating input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.rating input:focus {background:#D78412; color:#3A3D2E}
.rating input:hover {background:#CC790D; color:#3A3D2E}
*/
.CLASS {display:inline; width:5rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.CLASS input {display:inline; width:5rem !important; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.CLASS input:focus {background:#D78412; color:#3A3D2E}
.CLASS input:hover {background:#CC790D; color:#3A3D2E}
.EF {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.EF input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.EF input:focus {background:#D78412; color:#3A3D2E}
.EF input:hover {background:#CC790D; color:#3A3D2E}
.MEM {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.MEM input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.EXP {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; margin-left:2rem !important;}
.EXP input {display:inline; width:8rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.fee_totals {border:none; font-size:1.75rem; background:inherit; color:#F6FFDA; width:3rem; line-height:2rem; height:2rem; position:relative; bottom:1px; margin:0;}
.player {margin-bottom:1rem}
.fee_setup {display:inline-block; vertical-align:middle;}
.fee_input {display:inline; line-height:2rem; height:2rem; border:none;}
input.fee:focus {background:#80A994; color:beige;}
.fee {border:none; font-size:1.5rem; background:#ABB6C8; line-height:2rem; height:2rem; padding:0.25rem 1rem; display:inline-block; vertical-align:middle;}
.fee_bank {display:inline;}
.number-B {display:table; color:#BCD2DB; text-align:left; float:right; margin-top:0.25rem; margin-left:-0.5rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.8rem; width:1.5rem;}
.ui-menu .ui-menu-item-wrapper {padding:0.50rem; box-sizing: inherit;}
/*.ui-menu .ui-menu-item { height:3rem; line-height:3rem; padding:0 !important;}*/
.ui-widget input:hover {background:#9CB7A9; color:inherit;}
/*input[type="text"].focus {border: solid 1px #969696;}*/
.ui-helper-hidden-accessible {display: none;}
.ui-menu .ui-menu-item-wrapper:hover {background:#696ECC;}
/*-------------------------------------------*/
#main {margin:0 auto; display:table; }
.arrow {font-size:1.5rem;}
#heading {text-align:center; white-space:no-wrap; font-size:1.5rem; background:#ADC1C9; color:#2E5363; display:inline; padding:0.75rem 2rem;
font-weight:bold; letter-spacing:2px; height:3.0rem; line-height:3.0rem; margin-top:1.5rem; border-radius:1rem; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); }
/*#heading:hover {background:#BB8443;}*/
#heading a {background:inherit; color:#1F4244; text-decoration:none; text-shadow: 2px 2px 15px #60883E;}
#heading a:hover {background:inherit;}
#heading a img {vertical-align:middle; text-decoration:none; height:2.5rem; line-height:2.5rem; }
#print_image {margin-right: 1.5rem;}
#author {margin:2rem 0; font-size:1.5rem; font-weight:bold; color:#8E2800; text-decoration:none; text-align:right;}
#helper {display:table; margin:0rem auto; margin-top:-2rem; font-size:1.5rem; font-weight:bold; color:#1F4244 !important; text-decoration:none;}
.pusher {background:#FFB03B; color:#1F2936; opacity:0.8; padding:0.5rem; border-radius:0.25rem;}
summary {background:#D2F6E4; margin:0; margin-bottom:0.5rem; width:62rem !important; text-transform: uppercase; color:#465D51; font-size:1.5rem; letter-spacing:1px; font-weight:bold;}
details {background:#D2F6E4; margin:0rem 0; width:62rem !important; color:#17263F; padding:0.5rem;}
details p {text-align:justify; color:#332A23; margin:0.5rem; font-size:1.3rem}
h3 {margin-bottom:0rem; margin-left:1rem}
#docs {background:#D2F6E4; padding:1rem 2rem; margin-top:2rem; border-radius:1rem; font-weight:normal;}
#doc_button {background:#3E606F; color:beige !important; padding:0.6rem 1.5rem; border-radius:0.75rem; font-size:1.5rem; letter-spacing:1px; font-weight:bold; border:none; box-sizing:inherit; text-decoration: none; margin:1rem; float:none; cursor:pointer; display:inline-block; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); text-shadow: 0px 2px 2px rgba(0,0,0,0.4);}
#doc_button:hover {background:#193D2A; color:#fff !important;}
.record {color:#3D1713}
.clearer {clear:left; }
.right {text-align:right}
.left {text-align:left}
.center {text-align:center}
.underline {text-decoration:underline}
.bold {font-weight:bold;}
.boxer {box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
.middot {margin:0 0.5rem}
pre {font-size:2rem !important}
a:link {text-decoration:none}
.btn {background: #3498db; background-image: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none;}
.btn:hover {background: #3cb0fd; background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none;}
/* -------SLICK CAROUSEL------- */
a:link.shark, a:visited.shark {border-bottom:2px dotted darkblue; color: white; font-weight:bold;}
.fixedElement {position: sticky; top: 0; z-index:1000000; background:black;}
.no_show {display:none}
#skyfall {}
#buffer {height:40rem}
input::placeholder {color: #3A3D2E;}
.level {text-transform: uppercase}
#titles tr td {padding:0.25rem 1.5rem}
.universal {margin-bottom: 1rem}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://rawgit.com/Mathachew/jquery-autotab/master/js/jquery.autotab.min.js"></script>
<div class="container">
<div id="pairing" class="box" style="width:68rem;">
<div id="skyfall" class="box">
<div class="universal">
<div class="ui-widget glasnost">
<div class="cucumber">4</div>
<input type="text" id="P04" style="display:inline;" maxlength="25"
class="automplete-2 text person ui-autocomplete-input" autocomplete="off"> <span
class="arrow-right">⇾</span>
</div>
<div class="fee_input">
<div class="EF">EF $</div>
<input type="text" onblur="findTotalEF()" name="ef-fee" style="margin-right:1rem; width:1rem;"
class="number fee" maxlength="1" size="1"></div>
<div class="fee_input">
<div class="MEM">MEM $</div>
<input type="text" onblur="findTotalMem()" name="mem-fee" style="width:2rem;" class="number fee"
maxlength="2" size="2"></div>
<div class="fee_input">
<div class="EXP">EXP: <input type="text" id="X04" name="expires" class="number fee expDate"
maxlength="12"
size="12" disabled=""></div>
</div>
</div>
</div>
</div>
</div>

CSS not recognizing hover color set

I created a filter search list on javascript and nested the elements of my list under 3 different categories.
Cuenta NT
Training On the Job
Manual de procedimientos
The table works great while looking for any of these terms and retrieves them instantly. However, the list is intended to grow very much and I want the table to display a color similar to the one on the headings when the mouse hovers the results.
The problem is this:
Despite the background-color property was properly defined in the CSS sheet, I cannot see any color displaying while hovering the mouse on any of the results.
CSS
#myUL li a.1:hover:not(.header) {background-color: #FCF3CF;}
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li a.1:hover:not(.header) {
background-color: #FCF3CF;
}
#myUL li a.2:hover:not(.header) {
background-color: #D5F5E3;
}
#myUL li a.3:hover:not(.header) {
background-color: #D6EAF8;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

First of all, class names must not begin with a numerical character, so i renamed your classes to .x1, .x2and .x3. Second, use this selector #myUL li.x1 a:hover on the first of your hover rules, and similar ones for the others as shown below.
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li.x1 a:hover {
background-color: #FCF3CF;
}
#myUL li.x2 a:hover {
background-color: #D5F5E3;
}
#myUL li.x3 a:hover {
background-color: #D6EAF8;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="x1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="x2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="x3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

Do not use numbers as a name for html classes, it messes with the meaning of "classes" and your CSS too.
I changed 1,2,3 to child1, child2, child3
And i changed the their css, !important is set to assure the style applies (So it does not get overwritten).
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li.child1 > a:hover:not(.header) {
background-color: #FCF3CF !important;
}
#myUL li.child2 > a:hover:not(.header) {
background-color: #D5F5E3 !important;
}
#myUL li.child3 > a:hover:not(.header) {
background-color: #D6EAF8 !important;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="child1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="child2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="child3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

Is there a way to create a "pop up" event creation in a calendar using jQuery?

I am creating a calendar so members of different teams can create events based on what team they are on. I need it to work somewhat like Google Calendar. So when you click on the date, a "create event" pop up window will come up. The only thing in the pop up would be the title of the event, time, description, and the color that is assigned to that team.
There's got to be a way to do this in jQuery, but I've looked all over the jQueryUI website, and I can't seem to find anything.
Below is the HTML layout that I have created for the calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eTeam Leader Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
</head>
<body>
<div id="cal">
<div class="header">
<span class="left button" id="prev"> 〈 </span>
<span class="left hook"></span>
<span class="month-year" id="label"> January 2017 </span>
<span class="right hook"></span>
<span class="right button" id="next"> 〉 </span>
</div>
<table id="days">
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr><td class="today">1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>29</td><td>30</td><td>31</td><td class="nil"></td><td class="nil"></td><td class="nil"></td><td class="nil"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And the CSS:
body {
background: #e0e0e0;
}
#cal {
-moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
margin:50px auto;
font: 13px/1.5 "Helvetica Neue", Helvatica, Arial, san-serif;
display:table;
width:100%;
}
#cal .header {
cursor:default;
background: #FFF800;
background: -moz-linear-gradient(top, #FFF800, #FFF800);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800));
height: 34px;
position: relative;
color:#000000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight:bold;
text-shadow:0px -1px 0 #87260C;
text-transform: uppercase;
}
#cal .header span {
display:inline-block;
line-height:34px;
}
#cal .header .hook {
width: 9px;
height: 28px;
position: absolute;
bottom:60%;
}
.right.hook {
right:15%;
}
.left.hook {
left: 15%;
}
#cal .header .button {
width:24px;
text-align:center;
position:absolute;
}
#cal .header .left.button {
left:0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
border-right:1px solid #000000;
}
#cal .header .right.button {
right:0;
top:0;
border-left:1px solid #000000;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#cal .header .button:hover {
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
}
#cal .header .month-year {
letter-spacing: 1px;
width: 100%;
text-align: center;
}
#cal table {
background:#fff;
border-collapse:collapse;
width:100%;
}
#cal td {
color:#2b2b2b;
width:30px;
height:90px;
line-height:30px;
text-align:center;
border:1px solid #e6e6e6;
cursor:default;
}
#cal #days td {
line-height: 26px;
text-transform:uppercase;
font-size:90%;
color:#9e9e9e;
}
#cal #days td:not(:last-child) {
border-right:1px solid #fff;
}
#cal #cal-frame td.today {
background:#d3d3d3;
color:black;
box-shadow:1px 1px 0px #fff inset;
-moz-box-shadow:1px 1px 0px #fff inset;
-webkit-box-shadow:1px 1px 0px #fff inset;
}
#cal #cal-frame td:not(.nil):hover {
color:#000000;
text-shadow: #FFF800 0px -1px;
background:#FFF800;
background: -moz-linear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800));
-moz-box-shadow:0px 0px 0px;
-webkit-box-shadow:0px 0px 0px;
}
#cal #cal-frame td span {
font-size:80%;
position:relative;
}
#cal #cal-frame td span:first-child {
bottom:5px;
}
#cal #cal-frame td span:last-child {
top:5px;
}
#cal #cal-frame table.curr {
float:left;
}
#cal #cal-frame table.temp {
position:absolute;
}

As you have not provided an example of your JavaScript or any of your current attempts, I would advise reviewing the following example: http://jqueryui.com/dialog/#modal-form
Here is an example of how you could use it: https://jsfiddle.net/Twisty/8vj8qzm4/
HTML Added
<div id="newEvent" title="New Event">
<form>
<label for="newEventTitle">Event Title</label>
<input type="text" id="newEventTitle" class="text ui-widget-content ui-corner-all" />
<label for="newEventTime">Event Time</label>
<input type="text" id="newEventTime" class="text ui-widget-content ui-corner-all" />
<label for="newEventDesc">Event Description</label>
<input type="text" id="newEventDesc" class="text ui-widget-content ui-corner-all" />
<label for="newEventTeam">Team</label>
<input type="text" id="newEventTeam" class="text ui-widget-content ui-corner-all" />
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</form>
</div>
CSS Added
#newEvent label,
#newEvent input {
display: block;
}
#newEvent input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
jQuery
$(function() {
function checkLength(o, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
function addEvent(d) {
var valid = true;
$("#newEvent input").removeClass("ui-state-error");
valid = valid && checkLength($("#newEventTitle"), 3, 80);
if (valid) {
$.ajax({
url: "newEvent.php",
type: "POST",
data: {
eventName: $("#newEventTitle").val(),
eventDate: d,
eventTime: $("#newEventTime").val(),
eventDesc: $("#newEventDesc").val(),
eventColor: $("#newEventTeam").val()
},
success: function(resp) {
// Response may contain an Event ID that could be added to the calendar
$(".selected-day").removeClass("selected-day");
}
});
}
return valid;
}
var $popup = $("#newEvent").dialog({
autoOpen: false,
modal: true,
buttons: {
"Create Event": function() {
addEvent($(".selected-day").html());
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#newEvent form")[0].reset();
$("#newEvent form input").removeClass("ui-state-error");
$(this).dialog("option", "title", "New Event");
}
});
$("#newEvent form").submit(function(e) {
e.preventDefault();
addUser($(".selected-day").html());
});
$("#cal-frame td").click(function(e) {
var day = parseInt($(this).html());
$(this).addClass("selected-day");
var month = $("#cal .month-year").html();
var title = $popup.dialog("option", "title") + " for " + day + month;
$popup.dialog("option", "title", title);
$popup.dialog("open");
});
});
This is only tested as far as I could. It's not clear how you want to save this event, I assumed to a PHP Script that would enter it into a database. It's not clear how you want to represent the even on the calendar layout. So there is still lots for you to do.
This is only one way to do this, there are others out there.

Google App Script Sidebar Turns Blank from onclick

Code.gs
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Procard Tracking');
SpreadsheetApp.getUi().showSidebar(ui);
}
Sidebar.html
<style>
h2 {
margin-left: 10px;
color: #949494;
}
p {
margin: 20px 20px 0px 20px;
}
.form-style-7{
max-width:400px;
margin:50px auto;
background:#fff;
border-radius:2px;
padding:20px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 h1{
display: block;
text-align: center;
padding: 0;
margin: 0px 0px 20px 0px;
color: #5C5C5C;
font-size:x-large;
}
.form-style-7 ul{
list-style:none;
padding:0;
margin:0;
}
.form-style-7 li{
display: block;
padding: 9px;
border:1px solid #DDDDDD;
margin-bottom: 30px;
border-radius: 3px;
}
.form-style-7 li:last-child{
border:none;
margin-bottom: 0px;
text-align: center;
}
.form-style-7 li > label{
display: block;
float: left;
margin-top: -19px;
background: #FFFFFF;
height: 14px;
padding: 2px 5px 2px 5px;
color: #B9B9B9;
font-size: 14px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.form-style-7 input[type="text"],
.form-style-7 input[type="date"],
.form-style-7 input[type="datetime"],
.form-style-7 input[type="email"],
.form-style-7 input[type="number"],
.form-style-7 input[type="search"],
.form-style-7 input[type="time"],
.form-style-7 input[type="url"],
.form-style-7 input[type="password"],
.form-style-7 textarea,
.form-style-7 select
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: block;
outline: none;
border: none;
height: 25px;
line-height: 25px;
font-size: 16px;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 input[type="text"]:focus,
.form-style-7 input[type="date"]:focus,
.form-style-7 input[type="datetime"]:focus,
.form-style-7 input[type="email"]:focus,
.form-style-7 input[type="number"]:focus,
.form-style-7 input[type="search"]:focus,
.form-style-7 input[type="time"]:focus,
.form-style-7 input[type="url"]:focus,
.form-style-7 input[type="password"]:focus,
.form-style-7 textarea:focus,
.form-style-7 select:focus
{
}
.form-style-7 li > span{
background: #F3F3F3;
display: block;
padding: 3px;
margin: 0 -9px -9px -9px;
text-align: center;
color: #C0C0C0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.form-style-7 textarea{
resize:none;
}
.form-style-7 input[type="submit"],
.form-style-7 input[type="button"]{
background: #2471FF;
border: none;
padding: 10px 20px 10px 20px;
border-bottom: 3px solid #5994FF;
border-radius: 3px;
color: #D2E2FF;
}
.form-style-7 input[type="submit"]:hover,
.form-style-7 input[type="button"]:hover{
background: #6B9FFF;
color:#fff;
}
</style>
<body>
<h2>Instructions</h2>
<p>Fill out the spreadsheet receipt information before filling out this section.</p>
<form class="form-style-7">
<ul>
<li>
<label for="statment_date">Statement Date</label>
<input id ="statementdate" type="date" name="statment_date">
<span></span>
</li>
<li>
<label for="cardholders">CardHolder</label>
<select id="cardholders" name="cardholders">
</select>
<span></span>
</li>
<li>
<label for="prepared_by">Prepared By</label>
<input id="prepared_by"type="text" name="prepared_by" maxlength="100">
<span>If different from CardHolder</span>
</li>
<li>
<label for="total_activity">Total Activity</label>
<input id="totalactivity" type="text" name="total_activity" maxlength="100">
<span></span>
</li>
<li>
<input id="submit_button" type="submit" value="Submit" onclick="submitForm()">
<progress id="progress_bar" style="display: none; margin: auto;"></progress>
<div id="finished" style="display: none; margin: auto;">
<p style="font-size:22px; color: Green;">Ready to Print</p>
<p style="font-size:16px; padding-top: 0px;">Go to File -> Print</p>
<p style="font-size:12px; margin: 0px; padding: 0px;">(In the top left corner)</p>
</div>
</li>
</ul>
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
window.onload = setCardHolders();
function setCardHolders() {
google.script.run
.withSuccessHandler(function(cardHolders) {
fillCardHoldes(cardHolders);
})
.withFailureHandler(function(error) {
alert(error.message);
})
.withUserObject(this)
.getCardHolders();
}
function fillCardHoldes(cardHolders) {
var selectCardHolders = document.getElementById("cardholders");
for(var i = 1; i < cardHolders.length; i++) {
if (!isEmpty(cardHolders[i][0])) {
var newOption = document.createElement("option");
newOption.value = i+1;
newOption.innerHTML = cardHolders[i][0];
selectCardHolders.options.add(newOption);
}
}
}
function isEmpty(str) {
return (!str || 0 === str.length);
}
function submitForm() {
var todaysDateString = new Date().toString();
var statmentDate = new Date(document.getElementById("statementdate").value + " GMT-0800");
var cardHolderDrop = document.getElementById("cardholders");
var cardHolderRow = Number(cardHolderDrop.options[cardHolderDrop.selectedIndex].value);
var preparedBy = document.getElementById("prepared_by").value;
var totalActivity = Number(document.getElementById("totalactivity").value)
google.script.run
.withSuccessHandler(function(result) {
if (result) {
submitSuccessful();
} else {
alert("An error has occurred please contact spreadsheet owner.");
}
})
.withFailureHandler(function(error) {
submitFailed(error);
})
.withUserObject(this)
.submitted(todaysDateString, formatDate(statmentDate), parseInt(cardHolderRow), parseFloat(totalActivity), preparedBy);
document.getElementById("submit_button").style.display = 'none';
document.getElementById("progress_bar").style.display = 'block';
}
function submitSuccessful() {
document.getElementById("submit_button").style.display = 'inline';
document.getElementById("submit_button").value = "Resubmit"
document.getElementById("progress_bar").style.display = 'none';
document.getElementById("finished").style.display = 'inline';
}
function submitFailed(error) {
document.getElementById("submit_button").style.display = 'inline';
document.getElementById("progress_bar").style.display = 'none';
document.getElementById("finished").style.display = 'inline';
document.getElementById("finished_info").innerHtml = "<p style=\"font-size:18px; color: Red;\">Failed</p><p>Please Contact Spreadsheet owner.</p> <p>" + error.message + "</p>";
}
function formatDate(date) {
return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear()
}
</script>
This all used to work perfectly a weeek ago and I didn't touch it until these appeared. The input type date showed a dropdown calendar, and submit button worked and hide and showed html elements fine. This was without having to set the sandboxmode. However now the statement_date input which is of type date does not show a dropdown calendar anymore. Unless I set the sandboxmode of the sidebar to IFRAME. Which is fine but then when the submit button is clicked the whole sidebar goes blank and has no html what so ever inside of it what so ever. However the javascript still gets runs fine just the sidebar becomes blank.

You're submitting to an empty page, that's why it's getting all blank, disable submit button with the code below and have you're own code handle the submit:
$('form button').on("click",function(e){
e.preventDefault;
});
And use the IFRAME, it's much better (unless you want to send files to the server).