向此 html 表单添加字段，用于在电子表格中添加/编辑数据答案

【问题标题】：Add fields to this html form who add/edit data in a spreadsheet向此 html 表单添加字段，用于在电子表格中添加/编辑数据
【发布时间】：2020-02-24 22:31:19
【问题描述】：

我在this post 上找到了下面的脚本，我试图弄清楚如何在工作表上添加一个新列，并使其与 html 表单的工作方式与已经存在的两列相同

但是没有成功...

如果有人能花时间向我解释怎么做，那就太好了？？？？ HTML / CSS 方面和基本的 JS 对我来说是可以理解的，但其余的我自己很难理解

Here the sheet sample

谢谢！

CODE.GS

function doGet(request) {
  return HtmlService.createTemplateFromFile('Form').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}



/* Find ID*/

function getID(IDsearch){
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);  
  var ws = ss.getSheetByName("Database");
  /*set cells to plain text*/
  var range = ws.getRange(1, 1, ws.getMaxRows(), ws.getMaxColumns());
  range.setNumberFormat("@");

  var data = ws.getRange(3, 1, ws.getLastRow(), 2).getValues();


  var dataInput = data.map(function(r){return r[1];}); //ID column

  var position = dataInput.indexOf(IDsearch); //index of the row where ID is
  Logger.log(position);
  var dataArray = ws.getRange(position+3, 1, 1, 2).getValues(); //array with data from searched ID
  var clientsDataString = dataArray.toString();
  var clientsDataArray = clientsDataString.split(',');


  if(position > -1){
    return clientsDataArray;
  } else {
    return position;
  }

}




function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, 2).setValues([[formObject.name, formObject.ID]]);
    }
  } else {
    ws.appendRow([formObject.name, formObject.ID]);
  }
}

JavaScript.html

<script>

function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    


  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();


  }


/* Search for ID */
document.getElementById("btn-procurar").addEventListener("click", onSearch);

function onSearch() {

  var IDsearch = document.getElementById("insertID").value;
  google.script.run.withSuccessHandler(populateForm).getID(IDsearch);

}


function populateForm(clientsData) {

  document.getElementById("name").value = clientsData[0];
  document.getElementById("ID").value = clientsData[1];


}


</script>

form.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Contact-Form-Clean.css">
    <link rel="stylesheet" href="/styles.css">
    <?!= include('JavaScript'); ?>
    <?!= include('form-css'); ?>

</head>


<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="register-photo" style="padding-top: 30px;">
        <div class="form-container" style="width: 695px;">
            <form id="myForm" onsubmit="handleFormSubmit(this)" method="post" style="width: 720px;padding: 10px;padding-right: 20px;padding-left: 25px;">
                <input class="form-control" type="text" id="name" name="name" placeholder="Name" style="width: 300px;display: inline-block;margin-bottom: 20px;">
                    <input class="form-control" type="number" id="ID" name="ID" placeholder="ID" style="width: 165px;display: inline-block;" required="">
                    <button type="submit" id="btn-submeter" onclick="return confirm('Submit?')" class="btn btn-primary btn-block" style="width: 644px;margin-bottom: 35px;">Save data</button>
                    <script>
                        document.getElementById("myForm").addEventListener("submit", myFunction);
                        function myFunction() {
                        alert("Success");
                        }
                    </script>
                    <div id="output"></div>
                    <div style="margin-bottom: 15px;padding: 5px;background-color: rgba(255,255,255,0);padding-top: 0px;border-top: double;">
                    <h6 class="text-left" style="margin-top: 15px;display: inline-block;width: 519px;margin-right: 20px;margin-bottom: 10px;">Search/Fetch ID</h6>
                    <input class="form-control" type="text" id="insertID" name="insertID" placeholder="Insert ID" style="width: 155px;display: inline-block;">
                    <button class="btn btn-primary" id="btn-procurar" onclick="onSearch()" type="button" style="width: 450px;margin: 10px 0px 25px 0px;padding: 6px;margin-top: 0px;margin-bottom: 0px;margin-left: 29px;">Search by ID</button>
                    </div>

           </form>
        </div>
    </div>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

【问题讨论】：

能否提供But without success...的详细信息？
是的，谢谢您的回答！这意味着除了在 HTML 中添加一个字段外，我不明白这个脚本是如何工作的。我试图用谷歌应用程序脚本文档来理解“code.gs”，看起来那些“getRange（x，y，z）”是我应该修改以添加新列工作的东西，但我不知道如何...
感谢您的回复。我为我糟糕的英语水平深表歉意。我仍然无法理解您当前的问题。当我能正确理解您当前的问题和您的目标时，我会想出解决方案。
哦，我的错，我是法国人，我的英语很糟糕。简而言之，我在工作表中添加了 Colonne C，我想知道我必须在脚本中修改什么才能从表单中编辑此列的值以及列 A 和 B 的值
感谢您的回复。不幸的是，我仍然无法理解您的目标。我对此深表歉意。那么你能提供你期望的输入和输出值吗？

标签： google-apps-script google-sheets spreadsheet

【解决方案1】：

您希望使用 HTML 表单输入“姓名”、“ID”、“地址”、“电子邮件”和“电话”的值。
- 在您更新的共享电子表格中，放置了 5 个输入标签。
您想通过修改脚本来实现。

如果我的理解是正确的，那么这个答案呢？请认为这只是几个可能的答案之一。

修改点：

在您当前的脚本中，使用了 2 个值，例如 [formObject.name, formObject.ID]。
- 为此，请修改为[formObject.name, formObject.ID, formObject.address, formObject.email, formObject.phone]等5个值。

修改脚本

当你的脚本被修改后，变成如下。

从：

function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, 2).setValues([[formObject.name, formObject.ID]]);
    }
  } else {
    ws.appendRow([formObject.name, formObject.ID]);
  }
}

到：

function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  var v = [formObject.name, formObject.ID, formObject.address, formObject.email, formObject.phone];  // Added
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, v.length).setValues([v]);  // Modified
    }
  } else {
    ws.appendRow(v);  // Modified
  }
}

注意：

在您更新的共享电子表格中，type="number" 用于电话的输入标签。在这种情况下，例如，当值为01 33 33 33 33 33 时，会发生错误，因为01 33 33 33 33 33 不是数字。如果要显示01 33 33 33 33 33，请修改为type="string"。

【讨论】：