提交表单后直接转到新页面 [英] Direct to a new page after form submission

查看：89
本文介绍了提交表单后直接转到新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当前，我已经开发了一个Google Scripts API，供人们将文件上传到共享的Google云端硬盘文件夹中.文件成功上传后，我希望将他们带到单独的谢谢"页面，以便他们上传成功.目前，我在同一页面上只有一条消息可以达到此目的，并且我无法弄清楚如何定向到我创建的新页面.

Currently I've developed a Google Scripts API which is used for people to upload files to a shared Google Drive folder. After the file are uploaded successfully, I want them to be taken to a separate "Thank you" page so it is clear their upload has worked. Currently I only have a message on the same page to this effect and I cannot figure out how to direct to a new page that I have created.

这是我从其他问题中发现的其他内容，可尝试直接进入新页面，但是到目前为止，该功能仍无法正常工作，因为它仍保留在同一上传表单页面上.我已将其包含在我的code.gs文件的底部.关于如何直接指向自定义页面的任何想法，只要说谢谢"或类似内容，都很棒！

This is the additional bit I found from different questions to try direct to a new page however this is not working so far, as it remains on the same upload form page. I have included it at the bottom of my code.gs file. Any ideas on how to direct to a custom page that just says "thank you" or something similar would be great!

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

我其余的代码如下:

Code.gs:

 function doGet() {
        return HtmlService.createHtmlOutputFromFile('form').setSandboxMode(
                HtmlService.SandboxMode.IFRAME);
    }

function createFolder(parentFolderId, folderName) {
    try {
        var parentFolder = DriveApp.getFolderById(parentFolderId);
        var folders = parentFolder.getFoldersByName(folderName);
        var folder;
        if (folders.hasNext()) {
            folder = folders.next();
        } else {
            folder = parentFolder.createFolder(folderName);
        }
        return {
            'folderId' : folder.getId()
        }
    } catch (e) {
        return {
            'error' : e.toString()
        }
    }
}

function uploadFile(base64Data, fileName, folderId) {
    try {
        var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0]
                .replace('data:', '');
        var byteCharacters = Utilities.base64Decode(splitBase[1]);
        var ss = Utilities.newBlob(byteCharacters, type);
        ss.setName(fileName);

        var folder = DriveApp.getFolderById(folderId);
        var files = folder.getFilesByName(fileName);
        var file;
        while (files.hasNext()) {
            // delete existing files with the same name.
            file = files.next();
            folder.removeFile(file);
        }
        file = folder.createFile(ss);
        return {
            'folderId' : folderId,
            'fileName' : file.getName()
        };
    } catch (e) {
        return {
            'error' : e.toString()
        };
    }
}

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

Form.html:

Form.html:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>


<body>

<div align="center">
  <p><img src="https://drive.google.com/uc?export=download&id=0B1jx5BFambfiWDk1N1hoQnR5MGNELWRIM0YwZGVZNzRXcWZR"
  height="140" width="400" ></p>
<div>

    <form id="uploaderForm">
        <label for="uploaderForm">  <b> Welcome to the Tesco's animal welfare and soy reporting system. </b> </label>
<BR>
<BR>


<div style="max-width:500px; word-wrap:break-word;">

Please add your contact information below and attach a copy of your company's animal welfare standard before clicking submit. Wait for the browser to confirm your submission and you may then close this page.

<BR>
<BR>

Thank you very much for your submission.

</div>

<BR>
<BR>
        <div>
            <input type="text" name="applicantName" id="applicantName"
                placeholder="Your Name">
        </div>

<BR>
        <div>
            <input type="text" name="applicantEmail" id="applicantEmail"
                placeholder="Your Company">
        </div>

<BR>
<BR>
        <div>
            <input type="file" name="filesToUpload" id="filesToUpload" multiple>
            <input type="button" value="Submit" onclick="uploadFiles()">
        </div>
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="output"></div>
    <script>
        var rootFolderId = '1-aYYuTczQzJpLQM3mEgOkWsibTak7KE_';
        var numUploads = {};
        numUploads.done = 0;
        numUploads.total = 0;
        // Upload the files into a folder in drive
        // This is set to send them all to one folder (specificed in the .gs file)
        function uploadFiles() {
            var allFiles = document.getElementById('filesToUpload').files;
            var applicantName = document.getElementById('applicantName').value;
            if (!applicantName) {
                window.alert('Missing applicant name!');
            }
            var applicantEmail = document.getElementById('applicantEmail').value;
            if (!applicantEmail) {
                window.alert('Missing applicant email!');
            }
            var folderName = applicantEmail;
            if (allFiles.length == 0) {
                window.alert('No file selected!');
            } else {
                numUploads.total = allFiles.length;
                google.script.run.withSuccessHandler(function(r) {
                    // send files after the folder is created...
                    for (var i = 0; i < allFiles.length; i++) {
                        // Send each file at a time
                        uploadFile(allFiles[i], r.folderId);
                    }
                }).createFolder(rootFolderId, folderName);
            }
        }
        function uploadFile(file, folderId) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var content = reader.result;
                document.getElementById('output').innerHTML = 'uploading '
                        + file.name + '...';
                //window.alert('uploading ' + file.name + '...');               
                google.script.run.withSuccessHandler(onFileUploaded)
                        .uploadFile(content, file.name, folderId);
            }
            reader.readAsDataURL(file);
        }
        function onFileUploaded(r) {
            numUploads.done++;
            document.getElementById('output').innerHTML = 'uploaded '
                    + r.fileName + ' (' + numUploads.done + '/'
                    + numUploads.total + ' files).';
            if (numUploads.done == numUploads.total) {
                document.getElementById('output').innerHTML = 'All of the '
                        + numUploads.total + ' files are uploaded';
                numUploads.done = 0;
            }
        }
    </script>

        <label for="uploaderForm"> 

Powered by 3Keel 
</label>
</body>


</html>

Thanks.html:

Thanks.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Thank you for submitting!
  </body>
</html>

我已根据建议更改了此功能:

I have changed this function as recommended: 

        if (numUploads.done == numUploads.total) {
            window.location = 'Thanks.html';
            numUploads.done = 0;

现在它正在重定向到另一个页面，但我遇到此错误:

Now it is redirecting to another page but I am faced with this error:

  1. 那是一个错误.

在此服务器上找不到请求的URL.这就是我们所知道的.

The requested URL was not found on this server. That’s all we know.

推荐答案

如果您正在寻找解决问题的方法，该答案如何?

If you are looking for the solution of your issue yet, how about this answer?

  • 您要在Form.html处的处理完成后打开Thanks.html.
  • Form.html和Thanks.html放在项目中.
  • You want to open Thanks.html when the process at Form.html is finished.
  • Form.html and Thanks.html are put in a project.

如果我的理解是正确的，该解决方法如何?我经历过你的处境.那时，我可以通过此替代方法解决此问题.

If my understanding is correct, how about this workaround? I have ever experienced with your situation. At that time, I could resolve this issue by this workaround.

  • 不需要使用doPost()来访问Thanks.html.我认为您可以使用doGet()实现您想要的.
  • 我认为 @Scott Craig的答案也可以用于这种情况.在我的解决方法中，window.location = 'Thanks.html';的URL被修改了.
    • 使用已部署的Web Apps的URL.在您的脚本中，当用户访问您的表单时，他们将访问已部署的Web Apps的URL.在这种解决方法中，通过添加查询参数来使用它.
    • It is not required to use doPost() to access to Thanks.html. I think that you can achieve what you want using doGet().
    • I think that @Scott Craig's answer can be also used for this situation. In my workaround, the URL of window.location = 'Thanks.html'; is modified.
      • Uses the URL of deployed Web Apps. In your script, when users access to your form, they access to the URL of the deployed Web Apps. In this workaround, it is used by adding a query parameter.

      对于在问题中添加为"EDIT"的脚本，请进行以下修改.

      For the script added in your question as "EDIT", please modify as follows.

      window.location = 'Thanks.html';

      到: 

      window.location = 'https://script.google.com/macros/s/#####/exec?toThanks=true';

      https://script.google.com/macros/s/#####/exec是已部署的Web Apps的URL.请添加查询参数，例如toThanks=true.这是一个示例查询参数.

      https://script.google.com/macros/s/#####/exec is the URL of the the deployed Web Apps. Please add a query parameter like toThanks=true. This is a sample query parameter.

      请如下修改doGet().

      function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

      到: 

      function doGet(e) {
  if (e.parameter.toThanks) {
    return HtmlService.createHtmlOutputFromFile('Thanks')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  } else {
    return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
}

      注意:

      • 修改了已部署的Web Apps的脚本后，请将其重新部署为新版本.这样，最新的脚本就会反映到Web Apps.
      • 此修改后的脚本的流程如下.
        • 当用户访问Form.html时，由于未使用toThanks=true的查询参数，因此返回Form.html.
        • 运行onFileUploaded()并且if (numUploads.done == numUploads.total) {}为true时，它将使用查询参数toThanks=true打开Web Apps URL.这样，doGet()的if (e.parameter.toThanks) {}为真，并返回Thanks.html并将其打开.

          • Note:

          • When the script of the deployed Web Apps was modified, please redeploy it as new version. By this, the latest script is reflected to Web Apps.
          • The flow of this modified script is as follows.
            • When users access to the Form.html, because the query parameter of toThanks=true is not used, Form.html is returned.
            • When onFileUploaded() is run and if (numUploads.done == numUploads.total) {} is true, it opens the Web Apps URL with the query parameter of toThanks=true. By this, if (e.parameter.toThanks) {} of doGet() is true, and Thanks.html is returned and opened it.

              • 在我的环境中，我可以确认此修改后的脚本有效.但是，如果这在您的环境中不起作用，对不起.当时，我想考虑一下这个问题.

              In my environment, I could confirm that this modified script worked. But if this didn't work in your environment, I'm sorry. At that time, I would like to think of about the issue.

              这篇关于提交表单后直接转到新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆