Заполнение таблицы Google из формы html. Функция processForm работает хорошо, и все поля получают правильные данные. Моя проблема с launchForm, как я думаю. Форма открывается во всплывающем окне, но входные данные не загружают datalist элементы. К сожалению, я не понимаю, почему
function launchForm() {
var htmlApp = HtmlService
.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(400)
.setHeight(450);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
function processForm(formObject) {
var url = "LINK_TO_SPREADSHEET_OF_DATA_COLLECTION";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("List");
var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
var nameParam = [ws.getLastRow(),
formObject.recipe_name,
formObject.place_name,
formObject.servingOrder,
formObject.cuisine_name,
asiaTime]
ws.appendRow(nameParam);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">New Recipe</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="recipe_name">Recipe Name</label>
<input type="text" class="form-control" id="recipe_name" name="recipe_name" placeholder="Recipe Name" required>
</div>
<div class="form-group col-md-6">
<label for="cuisine_name">Cuisine</label>
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
<option value="Asian"></option>
<option value="Western"></option>
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Place name</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4h" value="LL4H" required>
<label class="form-check-label" for="ll4h">LL4H</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4t" value="LL4T" required>
<label class="form-check-label" for="female">LL4T</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="servingOrder">Serving order</label>
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
<option value="Starter"></option>
<option value="Main course"></option>
<option value="Veggi side"></option>
<option value="Carbs side"></option>
<option value="Dessert"></option>
<option value="Dough"></option>
<option value="Sauce"></option>
<option value="Drink"></option>
<option value="Other"></option>
</datalist>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
Где я не прав и как это исправить? Какой лучший способ закрыть всплывающее окно после отправки?