在 .gs 內使用 HtmlService.createTemplateFromFile(file) 呼叫 html 並把參數傳遞至 html 內
function doGet(e) {
let htmloutput = HtmlService.createTemplateFromFile('index')
// 把現在時間塞進去 index.html 內
htmloutput.date = Date();
return htmloutput.evaluate();
}
function doPost(e) {
return Activity(e);
}
function Activity(e) {
let spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
let sheet = spreadSheet.getSheetByName("工作表1");
let data = [e.parameter.email , e.parameter.date , e.parameter.meal , e.parameter.note];
sheet.appendRow(data);
}
Index.html
現在時間 <?= date ?> 寫法，就是準備接收 .gs 傳遞過來的參數，html form 標籤內的
- action：該 url 是 .gs 檔案部屬後取得的 url 網址
- method：使用 post， .gs 檔案內會呼叫 doPost() 並把使用者輸入資料，儲存進 SpreadSheet 內
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<!-- 從 .gs 檔案內把現在時間塞進來 -->
<p>目前時間：<br>
<?= date ?>!
</p>
<body>
<form
action="https://script.google.com/macros/s/AKfycbytjXZ2nGDMG5_0x_Q-8qhLBaJwQEJQqmYyNoiWtsO9utVLedltBUxSJt07luHf5FtPlg/exec"
method="POST">
<!-- Email 輸入框 -->
<label for="email">Email：</label><br>
<input type="email" id="email" name="email" size="30"><br><br>
<!-- 報名活動日期 Date Picker -->
<label for="date">報名活動日期：</label><br>
<input type="date" id="date" name="date" size="30" style="width:228px"><br><br>
<!-- 餐點選擇 ComboBox (葷素) -->
<label for="meal">餐點：</label><br>
<select id="meal" name="meal" style="width:228px">
<option value="meat">葷</option>
<option value="vegetarian">素</option>
</select><br><br>
<!-- 備註 TextArea -->
<label for="note">備註：</label><br>
<textarea id="note" name="note" rows="4" cols="30"></textarea><br><br>
<!-- 送出按鈕 -->
<button type="submit" style="width:228px">送出</button>
</form>
</body>
</html>
把 .gs 和 html 重點弄成一張圖來記憶
沒有留言:
張貼留言