Question

我正在尝试使用Google Script将用户信息从HTML表单发送到Google云端硬盘。

我有一个运行良好的版本，使用onclick事件，但我想添加功能，确保在提交之前填写所有必填字段。对此站点的研究建议在表单标签内提交，所以我修改了我的代码以使用onsubmit。这是下面显示的版本。

在提交时，表单完全消失，没有文件发送到云端硬盘。我知道onsubmit会刷新页面...但我希望它还能重新创建上一页减去表单，并添加一些关于成功上传的消息。当然，文件提交也需要工作。我很感激任何想法。

我查看了与非常相似的问题有关的帖子，并试图从他们那里实现一些代码，但还没有运气。谢谢！

<body>
    <div id = "image" style = "background-color:#03296d">
        <h1 id = "jhh">Employment</h1>
        <h1 class = "details"><strong>Employment Opportunities</strong></h1>
        <form id="myForm" onsubmit = "google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
                              google.script.run.withSuccessHandler(fileUploaded).doPost(this.parentNode);
                              return false;">

            <input id = "info" type="text" name="myName" placeholder="Your name">
            <input id = "info" type = "email" name="myEmail" placeholder="Email address">
            <input id = "info" type="text" name="myPhoneNumber" placeholder="Phone Number">
            <textarea  id = "info" type = "text" name = "myQualifications" placeholder = "Describe your qualifications" text = "wrap" cols = "40" rows = "10">
            </textarea>
            <br>
            <textarea  id = "info" type = "text" name = "myInfo" placeholder = "Any other information that would assist us in selecting you for the group interview." text = "wrap" cols = "40" rows = "10">
            </textarea>
            <input type="file" name="myFile">
            <input type="submit" value="Submit Application"> 
        </form>
    <div id="output"></div>
    <script>
        function fileUploaded(status) {   
            document.getElementById('myForm').style.display = 'none';
            document.getElementById('output').innerHTML = "Thank you";   
        }
    </script>

    <style>
        input { 
                display:block; 
                margin: 10px; 
               }
        textarea {
                   margin: 10px;
                 }
        jhh {
              font-family:'Gill Sans', Arial, Helvetica, sans-serif;
              font-size:24px;
              font-weight:100;
              line-height:normal;
             }
         .details {color: #4a4a4a;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-style: normal;}
    </style>
</body>

这是JavaScript：

var dropbox = "Applicants";

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

function uploadFiles(form) 
{
  try {   
    var name = form.myName;
    var folder,folders = DriveApp.getFoldersByName(dropbox);

   if (folders.hasNext()) 
    {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }    

    var blob = form.myFile;
    var contentType = blob.getContentType();
    var destinationFolder = folder.createFolder(name);
    var file = destinationFolder.createFile(blob);  
    if (contentType != "application/octet-stream") {
       file.setDescription("Uploaded by " + form.myName);
       return "Your submission was successfully uploaded."; 
    } else {      
       file.setDescription("No file or unsupported file type " + form.myName);
       file.setName("No file uploaded");
       return "Your submission was successfully uploaded."; 
    }
  } 
  catch (error) 
  {  
    return error.toString();
  }
}

function doPost(form) { // change to doPost(e) if you are recieving POST data
  var name = form.myName;
  var email = form.myEmail;
  var phoneNumber = form.myPhoneNumber;
  var qualifications = form.myQualifications;
  var info = form.myInfo;
  var newSheet = SpreadsheetApp.create(name,2,5);
  var folder, folders = DriveApp.getFoldersByName(name);

    if (folders.hasNext()) 
    {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
  var newSheetCopy = newSheet.copy(name + ' application');
  var newSheetCopyID = newSheetCopy.getId();
  var fileReference = DriveApp.getFileById(newSheetCopyID);
  folder.addFile(fileReference);
  DriveApp.getRootFolder().removeFile(fileReference);
  DriveApp.getRootFolder().removeFile(DriveApp.getFileById(newSheet.getId()));
  var headers = [['Name', 'Email', 'Phone Number', 'Qualifications', 'Additional Info']];
  var values = [[name, email, phoneNumber, qualifications, info]];
  var ss = SpreadsheetApp.openById(newSheetCopyID); 
  ss.getActiveSheet().setFrozenRows(1);
  ss.getRange('A1:E1').setValues(headers).setFontWeight('bold');
  ss.getRange('A2:E2').setWrap(true);
  ss.setColumnWidth(4, 500);
  ss.setColumnWidth(5, 500);
  ss.getRange('A2:E2').setValues(values);  
}

Answer 1

另外请注意，您的一些输入共享相同的ID。如果您要使用ID和名称，我会让它们匹配。我还会给提交按钮一个ID。您可能还想查看HTML5表单输入验证，这主要是由浏览器支持，但最终，您希望javascript（客户端）和服务器端代码验证您的输入。

<script>
/**
* Validates all form inputs and returns an error message as needed.
* @returns string
*/
function validateForm() {
    if (document.getElementById('myName').value.trim() === '') {
    return 'Name is required.';
    }
    return ''; // no error message
}

document.getElementById('submit').onclick = function() {
      var error = validateForm();

      if (error !== '') {

          return false;
      }

     document.getElementById('myForm').submit();

 }

</script>

尝试在Web窗体上使用必需的HTML属性;文本与onsubmit一起消失

1 个答案: