.gs/.Google Apps 脚本作为 Web 应用,使用表单元素、HTML 服务和电子表格
.gs/.Google Apps Script as a Web App using Form Elements, Html Service and a spreadsheet
我目前正在尝试从"Web Application"的角度学习一些"Google Apps Script"基础知识。 我想使用"HTML 服务",因为旧的"UI 服务"现已贬值。
基本上,我想完成的是将名称键入"名称"文本输入,然后单击"提交"按钮,然后应使用输入的值填充电子表格。 我认为下面的代码接近我需要的,但我不确定如何将它们联系在一起,以便表单元素与 .gs 代码一起使用。
目前,我发布的代码在打开电子表格时会在电子表格中的适当位置写入一个值。
任何帮助将不胜感激。索引.html
<div>
<? var submit = insertInSS(); ?>
<p>Add a Name:</p>
<input type="text" name="name">
<input type="submit" name="submit" value="Submit">
<hr>
<? var data = getData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</div>
我的 code.gs 如下所示
var submissioSSKey = '1234567890abcdefghijklmnopqrstuvwkyz';
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getData() {
return SpreadsheetApp
.openById(submissioSSKey)
.getActiveSheet()
.getDataRange()
.getValues();
}
function insertInSS(){
var ss = SpreadsheetApp.openById(submissioSSKey);
var sheet = ss.getActiveSheet();
var lastRow = ss.getLastRow();
var cell = sheet.getRange(lastRow+1, 1, 1,1);
cell.setValue("name");
}
问候
克里斯
通常,SUBMIT 按钮与 FORM 一起工作。 表单中没有"提交"按钮。 请注意第一个 FORM 标记中的onsubmit
事件侦听器。 无需配置触发器即可以这种方式运行脚本,还有其他方法。
表单和按钮 HTML
<div id="inputDiv">
<form id="inputForm" onsubmit="fncWriteInputData()">
<label>Some Label Text Here:</label>
<br>
<input type="text" tabindex="1" id="idFirstInput" class="inptFld" placeholder="Msg To User Here" required><br />
<label>Label Two Here:</label>
<br>
<input type="text" tabindex="2" id="idInputTwo" class="inptFldSgn" required><br />
<input type="submit" tabindex="3" id="btnSubmitInput" value="Click To Submit">
</form>
</div>
HTML 脚本标记
<script>
window.fncWriteInputData=function(){
console.log("fncWriteInputData ran");
google.script.run
.fncRunAppScript(); //Runs server side .gs function
</script>
Code.gs
function fncRunAppScript() {
Code here . . .
return someValue;
};
这是一些基本结构。 您需要根据需要修改和更正它。
相关文章:
- Javascript更新孙窗口中的表单元素
- 阻止表单元素提交
- 根据select选项元素将表单重定向到不同的URL
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 使用带有.net autopostback的ryanfait.com自定义表单元素
- 使用javascript更改表单元素的ID值
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 表单中元素的更改值为't已发布
- Small Javascript从动态表单中删除多个元素的问题
- 为什么表单元素不应命名为submit
- 如何使用相同的javascript控制表单中的不同元素
- 从函数中选择要触发表单提交的正确元素
- 如何重置搜索表单中的特定表单元素
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 使用 ng-repeat访问 ng 表单元素/值
- 获取电子邮件附件的表单元素
- js 语法传递名称元素表单验证
- 如何选择元素表单列表并将其放入文本框中
- 如何使用JQuery获取主体中第一个元素(表单)的id
- 尝试使用每个查找元素表单XML文件