Все HTML связанные методы (getElementById, innerHTML и т. Д. c.) Должны быть в сценарии на стороне клиента, а методы Apps Script должны быть на стороне сервера.
Если я правильно вас понимаю, вы хотите сделать следующее:
- Когда эта форма будет отправлена, найдите строку, столбцы K и L которой соответствуют введенным полям (индексы 10 и 11 из
inputData массив). - Для этой строки верните данные из столбцов O и P (индексы 14 и 15 из
inputData массива). - Запишите эти возвращенные данные в HTML.
Если все это правильно, то вы можете сделать это:
- Добавить событие onclick во входные данные для отправки, которые будут запускать функцию на стороне клиента (функцию, которая объявляется внутри тегов в HTML). Нет необходимости использовать для этого. Тело HTML может выглядеть примерно так:
<div id="nameDiv">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" >
<input type="submit" value="Submit" onclick="clientNameSearch()">
</div>
- Из этой функции на стороне клиента, называемой
clientNameSearch(), получить значения из fname и lname, и используйте их в качестве параметров при вызове серверной функции с именем nameSearch):
function clientNameSearch() {
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName);
}
- Эта серверная функция выполняет итерацию по всем строкам с содержимым в электронной таблице и возвращает
result для первой строки, столбцы K и L которой соответствуют введенным данным:
function nameSearch(firstName, lastName){
try {
var inputSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1z3j7wxMLsXilyKDIH7XnE7VNQqF66fIH4B-mmuWwCJ8/edit#gid=1235654559");
var inputData = inputSheet.getDataRange().getValues();
for (var i = 1; i < inputData.length; i++) {
if (inputData[i][10] == firstName && inputData[i][11] == lastName) {
var result = inputData[i][14] + ": " + inputData[i][15];
return result;
}
}
} catch(e) {
alert(e)
}
}
Этот result затем передается в качестве параметра в функцию на стороне клиента, называемую onSuccess через обработчик успеха . Это необходимо, поскольку функции на стороне сервера, вызываемые google.script.run, ничего не возвращают напрямую, как указано здесь . Затем onSuccess записывает result в HTML:
function onSuccess(result) {
document.getElementById('nameDiv').innerHTML = "<div>" + result + "</div>";
}
Полный код:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="nameDiv">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" >
<input type="submit" value="Submit" onclick="clientNameSearch()">
</div>
</body>
<script>
function clientNameSearch() {
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName);
}
function onSuccess(result) {
document.getElementById('nameDiv').innerHTML = "<div>" + result + "</div>";
}
</script>
</html>
И Code.gs будет выглядеть так:
function nameSearch(firstName, lastName){
try {
var inputSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1z3j7wxMLsXilyKDIH7XnE7VNQqF66fIH4B-mmuWwCJ8/edit#gid=1235654559");
var inputData = inputSheet.getDataRange().getValues();
for (var i = 1; i < inputData.length; i++) {
if (inputData[i][10] == firstName && inputData[i][11] == lastName) {
var result = inputData[i][14] + ": " + inputData[i][15];
return result;
}
}
} catch(e) {
alert(e)
}
}
function doGet(e) {
return HtmlService.createHtmlOutputFromFile("your-html-name");
}
Я не уверен, что вы хотите записать result в HTML, но в любом случае, на этом этапе не должно быть трудным изменить это так, чтобы он записывал именно то, что вы хотите и где вы хотите.
Ссылка:
Надеюсь, это поможет.