This HTML loads correctly and displays as intended. Two parts of it do not seem to work:
In either of these cases, the button does absolutely nothing and does not call the either the htmlCloser or saveUpdate functions.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
<style>
body {
font-family: 'Lexend';
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
}
</style>
<form>
<? let otherList = getOtherHHInfo(); ?>
<? let hhList = getHHValues(null ,true); ?>
<? let raceList = getRaces(); ?>
<? let relationList = getRelations(); ?>
<? let genderList = getGenders(); ?>
<? let stateList = getStates(); ?>
<? let sitchList = getLivingSitch(); ?>
<h2>Household</h2>
<div class="row">
<div class="column">
<input name="email" <?= i ?> value="<?= otherList[0] ?>">
<br>
<label for="email" <?= i ?>>Email</label>
</div>
<div class="column">
<input name="phone" <?= i ?> value="<?= otherList[1] ?>">
<br>
<label for="phone" <?= i ?>>Phone</label>
</div>
<div class="column">
<input name="method" <?= i ?> value="<?= otherList[2] ?>">
<br>
<label for="method" <?= i ?>>Contact method</label>
</div>
<div class="column">
<input name="language" <?= i ?> value="<?= otherList[3] ?>">
<br>
<label for="language" <?= i ?>>Language</label>
</div>
</div>
<hr>
<div class="row">
<div class="column">
<input name="address" <?= i ?> value="<?= otherList[4] ?>">
<br>
<label for="address" <?= i ?>>Physical address</label>
</div>
<div class="column">
<input name="city" <?= i ?> value="<?= otherList[5] ?>">
<br>
<label for="city" <?= i ?>>City</label>
</div>
<div class="column">
<input list="state" name="state" value="<?= otherList[6] ?>">
<datalist id="state" >
<? for (let j = 0; j < stateList.length; j++) { ?>
<option value="<?= stateList[j] ?>">
<? } ?>
</datalist>
<br>
<label for="state">State</label>
</div>
<div class="column">
<input name="zip" <?= i ?> value="<?= otherList[7] ?>">
<br>
<label for="zip" <?= i ?>>ZIP</label>
</div>
<div class="column">
<input name="addNotes" <?= i ?> value="<?= otherList[8] ?>">
<br>
<label for="addNotes" <?= i ?>>Address notes (directions)</label>
</div>
</div>
<hr>
<div class="row">
<div class="column">
<input list="cws" name="cws" value="<?= otherList[9] ?>">
<datalist id="cws" >
<option value="Yes">
<option value="No">
</datalist>
<br>
<label for="cws">Active CWS?</label>
</div>
<div class="column">
<input list="dv" name="dv" value="<?= otherList[10] ?>">
<datalist id="dv" >
<option value="Yes">
<option value="No">
</datalist>
<br>
<label for="dv">Fleeing DV?</label>
</div>
<div class="column">
<input list="pregnant" name="pregnant" value="<?= otherList[11] ?>">
<datalist id="pregnant" >
<option value="Yes">
<option value="No">
</datalist>
<br>
<label for="pregnant">Anyone pregnant?</label>
</div>
<div class="column">
<input list="livingSituation" name="livingSituation" value="<?= otherList[12] ?>">
<datalist id="livingSituation" >
<? for (let s = 0; s < sitchList.length; s++) { ?>
<option value="<?= sitchList[s] ?>">
<? } ?>
</datalist>
<br>
<label for="livingSituation" <?= i ?>>Current living situation</label>
</div>
<div class="column">
<input list="employed" name="employed" value="<?= otherList[13] ?>">
<datalist id="employed" >
<option value="Yes">
<option value="No">
</datalist>
<br>
<label for="employed">Employed?</label>
</div>
</div>
<br>
<hr>
<h2>People</h2>
<? for (let i = 0; i <= (hhList[0].length + 2); i++) { ?>
<? try {?>
<? if (!hhList[5][i].includes('.')) { ?>
<p><b>Head of household</b></p>
<? } else { ?>
<p><b>Household member #<?= i ?></b></p>
<? } ?>
<? } catch { ?>
<p><b>Household member #<?= i ?></b></p>
<? } ?>
<? if (i % 2 == 0){ ?>
<div class="row" style="background-color:#cccccc;">
<? } else { ?>
<div class="row" style="background-color:#eeeeee;">
<? } ?>
<div class="column">
<input name="firstName" value="<?= hhList[0][i] ?>">
<br>
<label for="firstName">First name</label>
</div>
<div class="column">
<input name="lastName" value="<?= hhList[6][i] ?>">
<br>
<label for="lastName">Last name</label>
</div>
<div class="column">
<input type="date" name="dob" value="<?= hhList[1][i] ?>">
<br>
<label for="dob" <?= i ?>>DOB</label>
</div>
<div class="column">
<input list="race" name="race" value="<?= hhList[2][i] ?>">
<datalist id="race" >
<? for (let j = 0; j < raceList.length; j++) { ?>
<option value="<?= raceList[j] ?>">
<? } ?>
</datalist>
<br>
<label for="race" <?= i ?>>Race</label>
</div>
<div class="column">
<input list="gender" name="gender" value="<?= hhList[3][i] ?>">
<datalist id="gender" >
<? for (let j = 0; j < raceList.length; j++) { ?>
<option value="<?= genderList[j] ?>">
<? } ?>
</datalist>
<br>
<label for="gender" <?= i ?>>Gender</label>
</div>
<div class="column">
<input list="relation" name="relation" value="<?= hhList[4][i] ?>">
<datalist id="relation" >
<? for (let j = 0; j < relationList.length; j++) { ?>
<option value="<?= relationList[j] ?>">
<? } ?>
</datalist>
<br>
<label for="relation" <?= i ?>>Relationship</label>
</div>
</div>
<? if (i == 0) { ?>
<input type="radio" name="setHoH" value="<?= i ?>" checked="checked"> Keep <?= hhList[0][i] ?> as head of household?
<hr>
<? } else { ?>
<? try { ?>
<? if (hhList[5][i].includes('~')) { ?>
<input type="checkbox" name="checkbox" value="<?= i ?>"> Re-include <?= hhList[0][i] ?> in household?
<input type="radio" name="setHoH" value="<?= i ?>"> Make <?= hhList[0][i] ?> head of household?
<hr>
<? } else { ?>
<input type="checkbox" name="checkbox" value="<?= i ?>"> Remove <?= hhList[0][i] ?> from household?
<input type="radio" name="setHoH" value="<?= i ?>"> Make <?= hhList[0][i] ?> head of household?
<hr>
<? } ?>
<? } catch { ?>
<input type="radio" name="setHoH" value="<?= i ?>"> Make <?= hhList[0][i] ?> head of household?
<hr>
<? } ?>
<? } ?>
<? } ?>
<input type="submit" id="members" value="Save changes" onclick="saveUpdatePop()">
<input type="submit" id="Cancel" value="Reset" onclick="resetUpdatePop()">
</form>
<script>
function saveUpdatePop() {
let firstNames = new Array;
let dobs = new Array;
let races = new Array;
let genders = new Array;
let relations = new Array;
let lastNames = new Array;
let otherInfo = new Array;
let removeMe = new Array;
let newHead = document.querySelector('input[name="setHoH"]:checked').value;
otherInfo.push(document.getElementsByName("email")[0].value);
otherInfo.push(document.getElementsByName("phone")[0].value);
otherInfo.push(document.getElementsByName("method")[0].value);
otherInfo.push(document.getElementsByName("language")[0].value);
otherInfo.push(document.getElementsByName("address")[0].value);
otherInfo.push(document.getElementsByName("city")[0].value);
otherInfo.push(document.getElementsByName("state")[0].value);
otherInfo.push(document.getElementsByName("zip")[0].value);
otherInfo.push(document.getElementsByName("addNotes")[0].value);
otherInfo.push(document.getElementsByName("cws")[0].value);
otherInfo.push(document.getElementsByName("dv")[0].value);
otherInfo.push(document.getElementsByName("pregnant")[0].value);
otherInfo.push(document.getElementsByName("livingSituation")[0].value);
otherInfo.push(document.getElementsByName("employed")[0].value);
for (k = 0; k < document.getElementsByName("firstName").length; k++){
firstNames.push(document.getElementsByName("firstName")[k].value);
dobs.push(document.getElementsByName("dob")[k].value);
races.push(document.getElementsByName("race")[k].value);
genders.push(document.getElementsByName("gender")[k].value);
relations.push(document.getElementsByName("relation")[k].value);
lastNames.push(document.getElementsByName("lastName")[k].value);
removeMe.push(document.querySelector('input[name="checkbox"]:checked').value);
}
if (removeMe.includes(newHead)) {
return;
}
google.script.run.htmlCloser();
google.script.run.saveUpdate(firstNames, dobs, races, genders, relations, otherInfo, lastNames, removeMe, newHead);
}
function resetUpdatePop() {
google.script.run.updateHHInfo();
}
</script>
</body>
</html>
It functions perfectly if I use the checkboxes that allow me to remove or re-include a household member. The Reset button also function perfectly.
I've tried checking logs to see that it isn't getting to the function calls. I've run this multiple times. I'm at a completely loss as to why it runs under some circumstances and not the others. I have no idea what I'm missing at this point and would appreciate another set of eyes. Thanks!
The removeMe.push(document.querySelector('input[name="checkbox"]:checked').value) would not allow the script to run if none of the values were checked