【发布时间】：2020-05-01 14:37:58
【问题描述】：
我是一个从 html 表单填写的 Google 电子表格。
函数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>我错在哪里以及如何解决？提交后关闭弹出窗口的最佳方法是什么？
【问题讨论】：
标签： javascript html google-apps-script google-sheets popup