使用 Google Sheets 和 Apps 脚本联系我们表格

Question

我尝试在 Apps 脚本中编写代码来制作联系表格。但出现错误。

这是前端看起来像：
这是有效的：

姓名、电子邮件、消息和文件上传正常工作，并且正确输入在 Google 表格所有单元格中可见。

这是不起作用的：

提交成功消息后未显示（我正在使用'swal.fire()'）。
并且如果不上传文件，姓名、电子邮件、消息的所有数据都不会在谷歌表格中可见。

这是谷歌表格截图：

这是我在appscript中尝试新代码的代码：（两个文件'code.js'和'index.html'）

code.js：

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = '#'
var sh = 'file1'
var folderId = '#'

function processForm(formdata){
  var superscript = SuperScript.initSuper(url,sh)
  
  var formObject = {}
  formdata.forEach(element => formObject[element.name] = element.value),
  formdata.forEach(element => formObject[element.message] = element.value)
  formdata.forEach(element => formObject[element.email] = element.value)

  var file = superscript.uploadFile(folderId,formObject.myfile.data,formObject.myfilename)
  var ss= SpreadsheetApp.openByUrl(url);
  var ws=ss.getSheets()[0]
   ws.appendRow([
     new Date(),
    formObject.name,
    "'"+formObject.message,formObject.email,file.getUrl()
  ]);
  };

和 2. index.html :

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
                <nav class="navbar navbar-dark bg-primary">
                    <a class="navbar-brand" href="#" fw-bold mb-3>WRITE YOUR Query/Message</a>
                </nav>
                <br>
                <form id="myForm" onsubmit="handleFormSubmit()">
                    <div id="form_alerts"></div>
                    <div class="form-group mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" id="name" Name="name" class="form-control" placeholder="Enter your Name here" required>
            </div>

             <div class="form-group mb-3">
              <label for="message">Message</label>
    <textarea id="message"class="materialize-textarea" name="message"  placeholder="Write your message here..." required ></textarea>
              </div>

            <div class="form-group mb-3">
            <label for="email" >Email</label>
                        <input type="email" id="email" Name="email" class="form-control" 
            placeholder="Enter your email address here" required>
            </div>

                        <div class="form-group">
                            <label for="uploadFile">Upload File</label>
                            <input type="file" class="form-control" File="file" id="file">
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">SEND</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

     <script>
        function preventFormSubmit() {
                var forms = document.querySelectorAll('myform');
                for (var i = 0; i < forms.length; i++) {
                    forms[i].addEventListener('SEND', function (event) {
                        event.preventDefault();
                    });
                }
            }
            window.addEventListener('load', preventFormSubmit);
            function handleFormSubmit() {
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            function success() {
                 document.getElementById("myForm").reset()
                 Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: 'Sended Successfully!!',
                  showConfirmButton: true,
                  timer: 1500 
                 })
            }
        var myfile ={},file, reader = new FileReader();
      reader.onloadend = function(e) {
          myfile.data = e.target.result
          myfile.name = file.name
          console.log(myfile)
      };
     $('#file').change(function(){
       file = $('#file')[0].files[0]
        reader.readAsDataURL(file);
     })
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="sweetalert2.all.min.js"></script>


</body>
</html>

注意这里是我遵循的教程：https://youtu.be/LKLIVLha2OI

Answer 1

尝试这个方法

与@C3roe一致，这意味着您需要匹配您在

Id

中使用的属性中的

name

，

appendRow

。

Code.gs

sheet.appendRow([
  new Date(),
  formObject.name,
  formObject.message,
  formObject.email
]);

index.html

<form id="myForm">
   <label for="name" class="form-label">Name</label><br>
  <input type="text" id="name" name="name" class="form-control" placeholder="Enter your Name here" required>
  <label for="message" class="form-label">Message</label><br>
  <input type="text" id="message" name="message" class="form-control" placeholder="Enter your Message" required>
  <label for="email" class="form-label">Email</label><br>
  <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email" required>

  <button type="submit" class="btn btn-primary btn-block">SEND</button>
 </div>
                        
</form>

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(formObject) {
  try {
    var sheetId = 'SpreadsheetId'; 
    var sheet = SpreadsheetApp.openById(sheetId).getActiveSheet();
    
    Logger.log("Form Data: ", formObject);
    
    
    sheet.appendRow([
      new Date(),
      formObject.name,
      formObject.message,
      formObject.email
    ]);

    return "Form submitted successfully";
  } catch (error) {
    Logger.log("Error: " + error.message);
    return "Error: " + error.message;
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
  
 <div class="container py-5">
    <div class="row">
      <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
        <nav class="navbar navbar-dark bg-primary">
          <a class="navbar-brand" href="#">WRITE YOUR Query/Message</a>
        </nav>
        <br>
 <form id="myForm">
   <label for="name" class="form-label">Name</label><br><br>
  <input type="text" id="name" name="name" class="form-control" placeholder="Enter your Name here" required>
  <label for="message" class="form-label">Message</label><br><br>
  <input type="text" id="message" name="message" class="form-control" placeholder="Enter your Message" required>
  <label for="email" class="form-label">Email</label><br><br>
  <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email" required>

  <button type="submit" class="btn btn-primary btn-block">SEND</button>
 </div>
                        
</form>

<script>
  document.getElementById('myForm').onsubmit = function(event) {
    event.preventDefault();

    var formData = new FormData(this);

  
    google.script.run.withSuccessHandler(function(response) {
      alert(response);
      document.getElementById('myForm').reset();
    }).processForm(Object.fromEntries(formData));
  };
</script>

</body>
</html>

输出示例

FrontEnd output

Spreadsheet

PS。我没有包含文件上传。因为优先级是“姓名”、“消息”和“电子邮件”。文件上传功能已经可以使用了。

参考

appendRow（行内容）

使用 Google Sheets 和 Apps 脚本联系我们表格

问题描述投票：0回答：1

1个回答

尝试这个方法

代码.gs

index.html

输出示例

参考

最新问题

使用 Google Sheets 和 Apps 脚本联系我们表格

问题描述 投票：0回答：1

1个回答

尝试这个方法

代码.gs

index.html

输出示例

参考

最新问题

问题描述投票：0回答：1