我正在开发“部署为网络应用程序 - Google Apps脚本”。该脚本使用'html服务'。我的示例脚本确实将数据写入Google表格,但我希望在您的帮助下完成更多工作。
下面列出了我未能完成此操作的尝试...电子表格密钥无效。
下面的Code.gs
var submissioSSKey = '1xjsrUJaPxxxxlpxxtf_hoSYw6tkr4WzbEIHTrB6ysx4';
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function processForm(myForm) {
var email = myForm.email;
var ss = SpreadsheetApp.openById(submissioSSKey);
var sheet = ss.getSheetByName('Data');
sheet.getRange(sheet.getLastRow()+1, 1, 1, 2).setValues([[Date(), email]]);
}
下面的index.html
<script>
function DataSaved(){
var emailPattern = /^[a-zA-Z0-9._]+[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/;
if (emailPattern.myForm(email) == false) {
document.getElementById('submitMessage1').innerHTML = "* a valid email is required";
}
// document.getElementById("myForm").reset(); // Reset
return false; // Prevent page refresh
};
</script>
<style>
body {
background-color: #000;
}
.container {
width:800px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#ccc;
}
p {
color: red;
}
#title {
font-size: 1.3em;
line-height: 50%;
color: #fff;
text-align: left;
font-weight: bold;
margin: 0px;
margin-bottom: 10px;
}
label {
color: #fff;
}
</style>
<div class="container">
<br /><div id="title">Simple Form</div><br />
<form id="myForm">
<label>Email</label> <br />
<input type="text" tabindex="1" id="email" name="email" size="25" required/>
<div id="submitMessage1"></div><br /><br />
<br /><br />
<input type="button" tabindex="2" id="Submit" value="Submit"
onClick="google.script.run.withSuccessHandler(DataSaved).processForm(this.form)"/>
</form>
</div>
此致
克里斯
答案 0 :(得分:1)
现在,onclick
事件的代码位于输入元素中:
<input type="button" tabindex="2" id="Submit" value="Submit" onClick="google.script.run.withSuccessHandler(DataSaved).processForm(this.form)"/>
在将表单数据发送到服务器之前,不会检查正确的电子邮件格式。我会改变代码的流程。首先调用HTML脚本标记中的函数,然后如果电子邮件格式通过,则使用google.script.run
API将表单数据发送到服务器。
<input type="button" tabindex="2" id="Submit" value="Submit" onClick="validateEmailFormat(this.form)"/>
脚本标记
<script>
function validateEmailFormat(argFormObject){
var email = myForm.email;
var emailPattern = /^[a-zA-Z0-9._]+[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/;
if (emailPattern.myForm(email) === false) {
document.getElementById('submitMessage1').innerHTML = "* a valid email is required";
} else {
google.script.run
.withSuccessHandler(DataSaved)
.processForm(email)
};
};
function DataSaved() {
document.getElementById('submitMessage1').innerHTML = "The email was saved";
};
</script>
function processForm(argEmail) {
var ss = SpreadsheetApp.openById(submissioSSKey);
var sheet = ss.getSheetByName('Data');
sheet.getRange(sheet.getLastRow()+1, 1, 1, 2).setValues([[Date(), argEmail]]);
}
此代码在将脚本标记发送到服务器之前从脚本标记中的表单对象中获取电子邮件。如果您只需要电子邮件值,则无需将整个表单对象发送到服务器。
答案 1 :(得分:1)
我有使用Google的“html服务”验证Google Apps脚本表单数据的主要概念,并感谢Sandy在工作代码中写入Google电子表格。我的工作代码可能对其他人有用,所以我在这里发布代码。您需要将'submissioSSKey'值替换为电子表格网址中的值才能使其正常工作。您还需要运行doget并接受权限。
code.gs应该看起来像这样
var submissioSSKey = '1xjsrUJaPxxxxlpxxtf_hoSYw6tkr4WzbEIHTrB6ysx4';
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function processForm(myForm) {
var email = myForm.email;
var ss = SpreadsheetApp.openById(submissioSSKey);
var sheet = ss.getSheetByName('Data');
sheet.getRange(sheet.getLastRow()+1, 1, 1, 2).setValues([[Date(), email]]);
}
index.html应如下所示
<script>
function validateEmailFormat(argFormObject){
console.log('start')
var emailEntry = document.forms["myForm"]["email"].value;
if (emailEntry.length == 0) {
document.getElementById('submitMessage1').innerHTML = "* a valid email is required";
} else {
google.script.run
.withSuccessHandler(DataSaved)
.processForm(myForm)
}
};
function DataSaved() {
document.getElementById('submitMessage1').innerHTML = "The email was saved";
};
</script>
<style>
body {
background-color: #000;
}
.container {
width:800px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#ccc;
}
p {
color: red;
}
#title {
font-size: 1.3em;
line-height: 50%;
color: #fff;
text-align: left;
font-weight: bold;
margin: 0px;
margin-bottom: 10px;
}
label {
color: #fff;
}
</style>
<div class="container">
<br /><div id="title">Simple Form</div><br />
<form id="myForm">
<label>Email</label> <br />
<input type="text" tabindex="1" id="email" name="email" size="25" required/>
<div id="submitMessage1"></div><br /><br />
<br /><br />
<input type="button" tabindex="2" id="Submit" value="Submit" onClick="validateEmailFormat(this.form)"/>
</form>
</div>