HTML表单不会使用doPost提交到电子表格 [英] HTML Form does not submit to spreadsheet using doPost
本文介绍了HTML表单不会使用doPost提交到电子表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
试图在现有的线索中找到一些有用的答案，但没有什么能真正符合我的问题。我猜这是一个快速修复，我只是看不到它。
我有一个HTML表单，并希望将文件上传到我的谷歌驱动器（效果很好）并将文本字段保存到我的电子表格中（根本不起作用）。
我无法找到两个函数之间的任何主要区别，它令人沮丧！
在我的代码下面，这里也是[链接到我的公共脚本] [1]。
表单：
<！DOCTYPE html>
< form id =myForm>
< input type =textname =myNameplaceholder =Your name ..>
< input type =filename =myFile>
< input type =submitvalue =Upload File
onclick =this.value ='上传..';
google.script.run.withSuccessHandler（fileUploaded）
.uploadFiles（this.parentNode）;
return false;
google.script.run.withSuccessHandler（fileUploaded）
.doPost（this.parentNode）;>
< / form>
< div id =output>< / div>
< script>
函数fileUploaded（status）{
document.getElementById（'myForm'）。style.display ='none';
document.getElementById（'output'）。innerHTML = status;
}
< / script>
< style>
input {display：block; margin：20px; }
< / style>
[1]：https://script.google.com/d/1K9jGl7ALHCZ93rz8GoeV8t7PE_7vgbNZlLJed1h6ZWyuoon11gIbik24/edit?usp=sharing
server.gs：
function doGet（e）{
var html = HtmlService.createTemplateFromFile（form）;
html = html.evaluate（）;
html.setSandboxMode（HtmlService.SandboxMode.IFRAME）;
返回html;
}
函数uploadFiles（表单）{
尝试{
var dropbox =客户形状;;
var文件夹，文件夹= DriveApp.getFoldersByName（dropbox）;
if（folders.hasNext（））{
folder = folders.next（）;
} else {
folder = DriveApp.createFolder（dropbox）;
}
var blob = form.myFile;
var file = folder.createFile（blob）;
file.setDescription（Uploaded by+ form.myName）;
返回File uploaded successfully+ file.getUrl（）;
} catch（error）{
return error.toString（）;
函数doPost（form）{//如果您正在接收POST数据
html.setSandboxMode（HtmlService.SandboxMode。模拟）;
var name = form.myName;
var url =url ...;
var message ='Ram';
var submitSSKey ='... kHI';
var sheet = SpreadsheetApp.openById（submitSSKey）.getActiveSheet（）;
var lastRow = sheet.getLastRow（）;
var targetRange = sheet.getRange（lastRow + 1，1，2，2）.setValues（[[name，url]]）;
}
感谢您的协助！
Martin
解决方案
如果您打算使用 google.script.run ，那么使用名为 doPost（）的函数是没有意义的。如果你想运行一个提交类型的输入标签，它也是毫无意义的： type =submit p
一个 withSuccessHandler（fileUploaded）来改变显示，你不能在窗体中有一个按钮。它会导致显示屏变空。
您不需要两个 google.script.run 调用。您需要进行多项更改和改进： b
$ b form.html
< ; form id =myForm>
< input type =textname =myNameplaceholder =Your name ..>
< input type =filename =myFile>
< / form>
< input type =buttonvalue =上传文件
onclick =this.value ='上传..';
var theForm = document.getElementById 'myForm'）;
google.script.run.withSuccessHandler（fileUploaded）
.processFormData（theForm）;>
< div id =output>< / div>
< script>
函数fileUploaded（status）{
document.getElementById（'myForm'）。style.display ='none';
document.getElementById（'output'）。innerHTML = status;
}
< / script>
< style>
input {display：block; margin：20px; }
< / style>
server.gs
function processFormData（form）{
uploadFiles（form.myFile）; //调用第一个函数来处理文件
var innerArray = [];
var outerArray = [];
innerArray.push（form.myName）;
innerArray.push（form.myFile）;
outerArray.push（innerArray）; //调用第二个函数将数据写入SS
writeDataToSS（outerArray）;
};
函数uploadFiles（theFile）{
尝试{
var dropbox =客户形状;;
var文件夹，文件夹= DriveApp.getFoldersByName（dropbox）;
if（folders.hasNext（））{
folder = folders.next（）;
} else {
folder = DriveApp.createFolder（dropbox）;
}
var blob = theFile;
var file = folder.createFile（blob）;
file.setDescription（已上传+ theFile）;
返回File uploaded successfully+ file.getUrl（）;
} catch（error）{
return error.toString（）;
}
}
函数writeDataToSS（values）{
//html.setSandboxMode(HtmlService.SandboxMode.EMULATED）;
var url =url ...;
var message ='Ram';
var submitSSKey ='... kHI';
var sheet = SpreadsheetApp.openById（submitSSKey）.getActiveSheet（）;
var lastRow = sheet.getLastRow（）;
var targetRange = sheet.getRange（lastRow + 1，1，2，.setValues（values）;
}
html文件不是模板，它没有scriptlet 。只需使用 createHtmlOutputFromFile（）：
函数doGet（e）{
var html = HtmlService.createHtmlOutputFromFile（form）;
html.setSandboxMode（HtmlService.SandboxMode.IFRAME）;
返回html;
}
tried to find some useful answer in existing threads but nothing is really matching my issue. I guess there is a quick fix to it, i just cannot see it.
I have a HTML form and want to upload the file to my google drive (works great) and save the text fields to my spreadsheet (does not work at all).
I just cannot find any major difference between the two functions, its frustrating!
Below my code, and here is also the [link to my public script][1].
Form:
<!DOCTYPE html>
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;
google.script.run.withSuccessHandler(fileUploaded)
.doPost(this.parentNode);">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
[1]: https://script.google.com/d/1K9jGl7ALHCZ93rz8GoeV8t7PE_7vgbNZlLJed1h6ZWyuoon11gIbik24/edit?usp=sharing
server.gs:
function doGet(e) {
var html = HtmlService.createTemplateFromFile("form");
html = html.evaluate();
html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function uploadFiles(form) {
try {
var dropbox = "Customer Shapes";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}
function doPost(form) { // change to doPost(e) if you are recieving POST data
html.setSandboxMode(HtmlService.SandboxMode.EMULATED);
var name = form.myName;
var url="url...";
var message = 'Ram';
var submitSSKey = '...kHI';
var sheet = SpreadsheetApp.openById(submitSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 2, 2).setValues([[name,url]]);
}
Thank You for Your kind help!
Martin
解决方案
If you are going to use google.script.run, then it's pointless to have a function named doPost(). And it's also pointless to have a submit type input tag: type="submit"
If you want to run a withSuccessHandler(fileUploaded) to change the display, you can't have a button inside of the form. It will cause the display to go blank.
And you don't need two google.script.run calls. You need multiple changes and improvements:
form.html
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
</form>
<input type="button" value="Upload File"
onclick="this.value='Uploading..';
var theForm = document.getElementById('myForm');
google.script.run.withSuccessHandler(fileUploaded)
.processFormData(theForm);">
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
server.gs
function processFormData(form) {
uploadFiles(form.myFile);//Call first function to process the file
var innerArray = [];
var outerArray = [];
innerArray.push(form.myName);
innerArray.push(form.myFile);
outerArray.push(innerArray);//Call second function to write data to SS
writeDataToSS(outerArray);
};
function uploadFiles(theFile) {
try {
var dropbox = "Customer Shapes";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = theFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + theFile);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}
function writeDataToSS(values) {
//html.setSandboxMode(HtmlService.SandboxMode.EMULATED);
var url="url...";
var message = 'Ram';
var submitSSKey = '...kHI';
var sheet = SpreadsheetApp.openById(submitSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 2).setValues(values);
}
The html file is not a template, it does not have a scriptlet in it. Just use createHtmlOutputFromFile():
function doGet(e) {
var html = HtmlService.createHtmlOutputFromFile("form");
html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
这篇关于HTML表单不会使用doPost提交到电子表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
