Question

我来自意大利的安德鲁，我试图改编我在网上找到的脚本。它是一个创建HTML表单并在电子表格中上传答案的脚本。

这是我开始的教程：

GS CODE：

var dropBoxId = "XXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

HTML code：

<form id="myForm">
  <input type="text" name="myName" placeholder="insert your name"/>
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="button" value="send"
      onclick="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this.parentNode)" />
</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

我想要一些字段。

我已经尝试了

<input type="text" name="myName" required>

但没有发生任何事情。

我该怎么办？有一个简单的解决方案吗？

谢谢！安德烈

EDIT 在提出一些建议之后，我已经更新了HTML代码：

新HTML代码：

<form id="myForm" onsubmit="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this)">

  <input type="text" name="myName" placeholder="insert your name" required />
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="submit" value="send"/>

</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

现在，如果我没有上传任何文件，则所需功能正常运行并更新电子表格。如果我单击按钮时附加文件页面刷新，脚本链接以这种方式更改：

https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXX/dev?myName=FirstName&email=mymail%40mail.com&myFile=File1.txt

我已经以这种方式在GS代码中添加了一些Logger.log：

var dropBoxId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);
  Logger.log('blob : ' + blob)
  Logger.log('myName : ' + formObject.myName)

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

如果我没有上传任何文件，这是输出：

[15-05-26 09:33:47:789 CEST] blob : FileUpload
[15-05-26 09:33:47:789 CEST] myName : myFirstName

如果我附加文件，则日志完全空白。

我无法理解问题所在。

Answer 1

您使用的代码没有“提交”类型输入（输入标记显示为提交按钮）。您正在使用的表单中的按钮是“按钮”类型的输入标签。

<input type="button">

的required属性使用输入类型“按钮”。将使用“提交”类型的输入标记。

<input type="submit">

StackOverflow - Difference between button and submit

但“提交”到底是做什么的？ “submit”类型的输入标记会导致要执行的表单标记中指定的任何操作，或者导致onsubmit触发：

<form action="urlToInvoke">

的onsubmit：

<form onsubmit="myFunction()">

您的输入表单没有action或onsubmit属性：

<form id="myForm">

在您的表单中，google.script.run函数是从“按钮”类型的输入标记调用的。

当前设置：

  <input type="button" value="send"
  onclick="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this.parentNode)" />

如果您想尝试使用required功能，可以尝试以下方法：

将输入类型更改为“提交”：

<input type="submit">

将google.script.run代码放入表单的onsubmit属性中：

<form id="myForm" onsubmit="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this)">

确保将this.parentNode更改为this。仅使用this关键字指的是它正在使用的任何元素。当从按钮执行onsubmit时，该按钮是表单的子项。在这种情况下，有必要将父级（即表单）传递给函数，从而this.parentNode。

形式＆＃34;必需＆＃34;表单输入字段中的属性不会导致任何事情发生

1 个答案: