I've been trying to make this work for hours, it seems like everything is in order but I cant make it work
Hopefully, maybe someone can point me in the right direction, do you see any issues with this code?
The relevant part is the last function on the first file
and for the second file, all just after the form components
I'm desperate :(
This is the code I'm using
code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("Webappboot"); //Name of the HTML file
}
function AddRecord(input1, input2, input3, input4, input5, input6, input7) { //Names of the componentsIDs
var ss= SpreadsheetApp.openById("1JJrWaeiDUC7TKFo3zjG3MHWJ90OnU6N3AiEh-9cXdaE"); //Paste Google Sheet ID
var webAppSheet = ss.getSheetByName("TrainingLogData"); //Paste Data Sheet Name
var lastRow = webAppSheet.getLastRow();
webAppSheet.insertRows(2, 1);//shift all rows down by one from row 2
webAppSheet.getRange(2,1).setValue(lastRow); //Entry ID
webAppSheet.getRange(2,2).setValue(input1); // Date
webAppSheet.getRange(2,3).setFormula('="Wk - " & WEEKNUM(B2) & " - " & YEAR(B2)'); // Week # and Year Formula: ="Wk - " & WEEKNUM(B2) & " - " & YEAR(B2)
webAppSheet.getRange(2,4).setValue(input2); //Exercise
webAppSheet.getRange(2,5).setValue(input3); //Mov.Pattern/Muscle Group
webAppSheet.getRange(2,6).setValue(input4); //Sets
webAppSheet.getRange(2,7).setValue(input5); //Reps
webAppSheet.getRange(2,8).setValue(input6); //RIR
webAppSheet.getRange(2,9).setValue(input7); //Kg
webAppSheet.getRange(2,10).setValue(new Date()); //Timestamp
}
function getDropDownArray (){
var ss2 = SpreadsheetApp.openById("1JJrWaeiDUC7TKFo3zjG3MHWJ90OnU6N3AiEh-9cXdaE"); //Google Sheet ID
var dropdownSheet = ss2.getSheetByName("SupportSheet"); //Sheet with dropdown options
var lastRowdd = dropdownSheet.getLastRow();
return dropdownSheet.getRange(1,2,lastRowdd, 1).getValues();
}
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script>
function AddRow()
{
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
var input3 = document.getElementById("input3").value;
var input4 = document.getElementById("input4").value;
var input5 = document.getElementById("input5").value;
var input6 = document.getElementById("input6").value;
var input7 = document.getElementById("input7").value;
if(input1 != '' && input2 != '' && input3 != '' && input4 != '' && input5 != '' && input6 != '' && input7 != '')
{
google.script.run.AddRecord(input1, input2, input3, input4, input5, input6, input7);
document.getElementById("input1").value = '';
document.getElementById("input2").value = '';
document.getElementById("input3").value = '';
document.getElementById("input4").value = '';
document.getElementById("input5").value = '';
document.getElementById("input6").value = '';
document.getElementById("input7").value = '';
document.getElementById("display_error").innerHTML = "";
}
else
{
document.getElementById("display_error").innerHTML = "Enter All Information";
}
}
</script>
</head>
<body>
<!-- Login Form -->
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="card shadow">
<div class="card-title text-center border-bottom">
<h2 class="p-3">Data Entry</h2>
</div>
<div class="card-body">
<form>
<div class="mb-4">
<label for="input1" class="form-label">Input1</label>
<input type="date" class="form-control" id="input1" />
</div>
<div class="mb-4">
<label for="input2" class="form-label">input2</label>
<input type="text" class="form-control" id="input2" />
</div>
<div class="mb-4">
<label for="input3" class="form-label">input3</label>
<select class="form-control" id="input3" >
</select>
</div>
<div class=row>
<div class="col mb-4">
<label for="input4" class="form-label">input4</label>
<input type="number" class="form-control" id="input4" />
</div>
<div class="col mb-4">
<label for="input5" class="form-label">input5</label>
<input type="number" class="form-control" id="input5" />
</div>
</div>
<div class=row>
<div class="col mb-4">
<label for="input6" class="form-label">input6</label>
<input type="text" class="form-control" id="input6" />
</div>
<div class="col mb-4">
<label for="input7" class="form-label">input7</label>
<input type="text" class="form-control" id="input7" />
</div>
</div>
<div class="mb-4">
<input type="button" value="Submit" class="btn btn-primary mr-1" onclick="AddRow()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function afterPageLoads() {
google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
}
function afterDropDownArrayReturned(arrayOfArrays){
var dditem = document.getElementById("input3");
arrayOfArrays.forEach(function(r){
var option = document.createElement("option");
option.textContent = r[0];
dditem.appendChild(option);
});
}
document.addEventListener("DOMcontentLoaded",afterPageLoads);
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
I thought that in your script, DOMcontentLoaded is required to be modified.
document.addEventListener("DOMcontentLoaded",afterPageLoads);
document.addEventListener("DOMContentLoaded", afterPageLoads);
DOMcontentLoaded is modified to DOMContentLoaded.