我正在嘗試創建一個 html 表單，將資料加載到谷歌作業表中，在提交并將其加載到作業表后，我想在 html 中顯示計算欄位的結果。根據所選分支，計算在谷歌作業表中的特定單元格中。點擊提交后如何顯示結果？
代碼.gs：
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function processForm(formObject){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var branch = formObject.branch;
var participants = formObject.participants;
var engagment = formObject.engagment;
var predictedValue = 0;
if (branch == "On") {sheet.getRange('B2').setValue(participants), sheet.getRange('F2').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Barak") {sheet.getRange('B3').setValue(participants), sheet.getRange('F3').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Giv'atayim") {sheet.getRange('B4').setValue(participants), sheet.getRange('F4').setValue, predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Gilad") {sheet.getRange('B5').setValue(participants), sheet.getRange('F5').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Ganim") {sheet.getRange('B6').setValue(participants), sheet.getRange('F6').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Lahav") {sheet.getRange('B7').setValue(participants), sheet.getRange('F7').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Magen") {sheet.getRange('B8').setValue(participants), sheet.getRange('F8').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Oz") {sheet.getRange('B9').setValue(participants), sheet.getRange('F9').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
}索引.html：
<!DOCTYPE html>
<html>
<head>
<?!= include('JavaScript'); ?>
</head>
<body>
<h1>Enter your details</h1>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<label for="branch">Choose your branch:</label>
<input list="magicHouses" id="branch" name="branch" placeholder="click here to choose" />
<datalist id="magicHouses">
<option value="On">
<option value="Barak">
<option value="Giv'atayim">
<option value="Gilad">
<option value="Ganim">
<option value="Lahav">
<option value="Magen">
<option value="Ogen">
<option value="Oz">
<option value="Rishonim">
</datalist>
<label for="participants">Number of participants last year</label>
<input type="text" class="form-control" id="participants" name="participants" placeholder="Enter the number">
<label for="engagment">Parents Engagment</label>
<input type="text" class="form-control" id="engagment" name="engagment" placeholder="Enter the number">
<button type="submit">Submit</button>
</form>
</body>
</html>JavaScript：
<script>
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>我要顯示的欄位是預測值。它可以是彈出訊息等或在另一個網頁上
uj5u.com熱心網友回復：
在您的腳本中，如何進行以下修改？
Google Apps 腳本方面：Code.gs
從：
else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
}
到：
else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
return predictedValue; // Added. This is important.
}
Javascript方面：JavaScript.html
從：
google.script.run.processForm(formObject);
到：
google.script.run.withSuccessHandler(e => { // Here, you can use the returned value from Google Apps Script side.
alert(e);
}).processForm(formObject);
- 在此修改中，Google Apps 腳本端的回傳值可以通過
withSuccessHandler. 這里，作為一個樣本，alert被使用。請根據您的實際情況進行修改。
筆記
當您修改 Google Apps 腳本時，請將部署修改為新版本。這樣，修改后的腳本就會反映在 Web Apps 中。請注意這一點。
您可以在“在不更改新 IDE 的 Web 應用程式 URL 的情況下重新部署 Web 應用程式”的報告中查看詳細資訊。
參考：
- withSuccessHandler(函式)
uj5u.com熱心網友回復：
正如 Tanaike 所說，您需要使用成功處理程式。您的代碼的一個潛在問題是它無法處理可能的多個同時提交的表單。有關如何執行此操作的示例，請參閱Web 應用程式演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481066.html
標籤：谷歌应用脚本