根据从电子表格中获取的数据自动填充表单中的字段答案

【问题标题】：Auto-populate fields in a form based on a select with data taken from spreadsheet根据从电子表格中获取的数据自动填充表单中的字段
【发布时间】：2020-08-17 05:52:14
【问题描述】：

我已经使用 GAS 完成了一个网络应用程序，该应用程序将提交时的数据发送到电子表格 A。
还有一个选择选项，可以从 A 列中的另一个电子表格 B（“xxx”）动态获取一些数据。

这是代码：

在 Code.gs 中：

function address() {
  var sheet   =  SpreadsheetApp.openById("xxx").getSheetByName("Sheet3");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A1:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
}

在 Index.html 中：

<select class="custom-select" name="test" id="test">
 <?!= address(); ?>
</select>

我会根据与选择选项中 Col A 中的值相对应的 B e C 列自动填充表单中的其他两个字段。

例如，如果在选择选项中的电子表格 B（“xxx”）中我选择“意大利”，那么还会有两个用户不可编辑的字段，其中包含数据“Tom”和“Red”。

+-----------------------+---------+-------+
| Col A (Select Option) |  Col B  | Col C |
+-----------------------+---------+-------+
| Italy                 | Tom     | Red   |
| USA                   | Michael | Green |
| Africa                | Anna    | Blue  |
+-----------------------+---------+-------+

（输出）

我该如何继续？

更新 1 （我正在尝试使用 Tanaike 的解决方案）

代码.gs

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

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

/* @Process Form */
function processForm(formObject) {
  var url = "xxxx";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  
  ws.appendRow([formObject.azienda,
                formObject.test,
                formObject.field1,
                formObject.field2]);
}

function address() {
  var sheet   =  SpreadsheetApp.openById("xxxx").getSheetByName("Sheet3");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:C" + lastRow);  // Modified
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += `<option data-values="${data[i][1]},${data[i][2]}">${data[i][0]}</option>`;  // Modified
  };
  return optionsHTML;
}

Index.html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-8">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                        <p class="h4 mb-4 text-center">Contact Details</p>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="azienda">Azienda</label>
                                <input type="text" class="form-control" id="azienda" name="azienda" required="">
                            </div>
                            
                        <div class="form-group col-md-2">
                             <label for="test">Ateco 1</label>
                             <select class="custom-select" name="test" id="test">
                             <?!= address(); ?>
                             </select>
                        </div>
                        
                        <div class="form-group col-md-5">
                            <label for="field1">Field1</label>
                            <input type="text" class="form-control" id="field1" name="field1" disabled="disabled">
                        </div>
                        
                        <div class="form-group col-md-5">
                            <label for="field2">Field2</label>
                            <input type="text" class="form-control" id="field2" name="field2" disabled="disabled">
                        </div>
                        
                    </div>

                        <button type="submit" class="btn btn-primary btn-block">Inserisci in Master Leads</button>
                    </form>
                    <div id="output"></div>
                </div>
            </div>      
        </div>
    </body>
  <?!= include('JavaScript'); ?>
</html>

Javascript.html

<script>
  // Prevent forms from submitting.
  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();
  }
  
  function setValues(select) {
  const [v1, v2] = select.options[select.selectedIndex].dataset.values.split(",");
  document.getElementById("field1").value = v1;
  document.getElementById("field2").value = v2;
}

  const select = document.getElementById("test");
  setValues(select);
  select.addEventListener("change", () => setValues(select));

</script>

【问题讨论】：

有问题吗？
对不起？我想知道是否有解决方案。
到底是什么问题？有错误吗？哪条线？调试细节？
我想找到一个解决方案来自动填充其他字段。正如你所看到的问题，我已经编写了从选择选项中的电子表格中动态获取数据的代码，现在我已经询问了如何处理其他字段。
执行与第一列相同的操作。 getValues(A:C...) 和 data[i][1] 或 data[i][2] 根据您想要的列。继续尝试吧。

标签： javascript google-apps-script google-sheets bootstrap-4 web-applications

【解决方案1】：

我相信你的目标如下。

When an option, which is the value of column "A", is selected, you want to set the values from the column "B" and "C" to the input tags with the readonly.

修改点：

在此修改中，当address() 在<?!= address(); ?> 运行时，“A”到“C”列的值设置为选项。 “B”和“C”列的值设置为自定义属性。在 HTML 方面，添加了 2 个输入标签，如您所期望的 disabled="disabled"。
选择其他选项时，“B”和“C”列的值使用 Javascript 设置为 2 个输入标记。
在您的电子表格样本值中，第一行似乎是标题行。

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

修改后的脚本：

Google Apps 脚本端：`Code.gs`

function address() {
  var sheet   =  SpreadsheetApp.openById("xxx").getSheetByName("Sheet3");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:C" + lastRow);  // Modified
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += `<option data-values="${data[i][1]},${data[i][2]}">${data[i][0]}</option>`;  // Modified
  };
  return optionsHTML;
}

HTML&Javascript 端：`index.html`

在此修改中，添加了 2 个输入标签和 Javascript。

<select class="custom-select" name="test" id="test">
  <?!= address(); ?>
</select>
<input type="text" id="field1" disabled="disabled">
<input type="text" id="field2" disabled="disabled">

<script>
function setValues(select) {
  const [v1, v2] = select.options[select.selectedIndex].dataset.values.split(",");
  document.getElementById("field1").value = v1;
  document.getElementById("field2").value = v2;
}

const select = document.getElementById("test");
setValues(select);
select.addEventListener("change", () => setValues(select));
</script>

注意：

请使用此 Google Apps 脚本启用 V8。

【讨论】：

感谢您的回答。我已应用您的代码，但字段 (B-C) 为空。
@Popoff 感谢您的回复。我带来的不便表示歉意。不幸的是，我无法复制您的情况。因为在我的环境中，我可以确认脚本有效。我为此道歉。因此，为了正确复制您的情况，您能否提供当前脚本来复制您的问题？借此，我想确认一下。如果可以，请将其添加到您的问题中。如果您能合作解决您的问题，我很高兴。
@Popoff 感谢您回复并添加更多信息。以您的情况为例，请将<?!= include('JavaScript'); ?> 移至</body> 的底部，如</div><?!= include('JavaScript'); ?></body> 或</body><?!= include('JavaScript'); ?></html>，然后再次测试。
谢谢！现在它起作用了！当然，如果我想在 B 和 C 之外添加一些其他列，我必须编辑哪一行代码？
@Popoff 感谢您的回复。我很高兴你的问题得到了解决。当您想添加更多列时，请修改 Google Apps Script 中的optionsHTML += ... 行。并请在Javascript中修改setValues()的功能。

修改点：

修改后的脚本：

Google Apps 脚本端：Code.gs

HTML&Javascript 端：index.html

注意：

Google Apps 脚本端：`Code.gs`

HTML&Javascript 端：`index.html`