Google Sheets 脚本用户表单 - 将数据从表单发送到电子表格 - 用户表单字段未正确处理

Question

我是 google 脚本的新手。我已经在线学习了一些教程并创建了一个具有 4 个输入的用户表单： 公司名称、数量、代理和评论。这里的唯一目标是从用户表单复制数据以传播sheet。我已经编写了以下 html 和函数，但是在单击添加按钮后数据没有被填充。

I know the addRowData function is working when correct input gets to it. So either I am not population rowData correctly or EventListener does not work correctly. Can anybody please help me find where the issue is?

    function addNewRow(rowData) {
  const currentDate=new Date();
  const ss=SpreadsheetApp.getActiveSpreadsheet();
  const ws=ss.getSheetByName("Results");
  ws.appendRow([currentDate, rowData.companyName,rowData.qty,rowData.agentName,rowData.commentText]); 
  return true;
}


   <div class="container">
      <div>
      <div class="form-group">
        <label for="company-name">Company</label>
        <input type="text" class="form-control" id="company-name">
      </div>
      <div class="form-group">
        <label for="number-boxes">Number of Boxes</label>
        <input type="Text" class="form-control" id="number-boxes">
      </div>
      <div class="form-group">
        <label for="agent-name">Agent</label>
        <input type="text" class="form-control" id="agent-name">
      </div>
      <div class="form-group">
        <label for="comment-text">Comment</label>
        <input type="Text" class="form-control" id="comment-text">
      </div>
      <button  class="btn btn-primary" id="mainButton">Add</button>
    </div>
  </div>


     <script>
       function afterButtonClicked(){
         var companyName = getElementById("company-name");
         var qty = getElementById("number-boxes");
         var agentName = getElementById("agent-name");
         var commentText = getElementById("comment-text");
         var rowData={companyName: companyName.value,qty: qty.value,agentName: agentName.value,commentText: commentText.value};
         google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
       }
       function afterSubmit(e){
         var qty = getElementById("number-boxes");
         qty.value="";
       }
       
       document.getElementById("mainButton").addEventListener("click",afterButtonClicked());
     </script>
  
  
  </body>

Answer 1

我想提出以下修改。

修改点：

• 在document.getElementById("mainButton").addEventListener("click",afterButtonClicked());，函数是运行由afterButtonClicked()的()在HTML的负载。在这种情况下，请删除 ().
• 关于getElementById("###")，在这种情况下，请添加document如document.getElementById("###")。

当以上几点反映到你的脚本中，就会变成如下。我认为您的 Google Apps 脚本有效。

修改后的脚本：

在这种情况下，请按如下方式修改您的Javascript。

<script>
 function afterButtonClicked(){
   var companyName = document.getElementById("company-name");
   var qty = document.getElementById("number-boxes");
   var agentName = document.getElementById("agent-name");
   var commentText = document.getElementById("comment-text");
   var rowData={companyName: companyName.value,qty: qty.value,agentName: agentName.value,commentText: commentText.value};
   google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
 }
 function afterSubmit(e){
   var qty = document.getElementById("number-boxes");
   qty.value="";
 }
 
 document.getElementById("mainButton").addEventListener("click",afterButtonClicked);
</script>

参考文献：

• EventTarget.addEventListener()
• Document.getElementById()