使用从电子表格中获取的数据自动填充基于 select 的表单中的字段

Question

我用 GAS 做了一个网络应用程序，可以将提交的数据发送到电子表格 A。
还有一个 select 选项可以从 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>

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

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

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

（输出）

我该如何继续？

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

Code.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>

Answer 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" 你期望的。
选择其他选项时，使用Javascript的列“ B”和“ C”的值将其设置为2个输入标签。
在您的电子表格示例值中，第一行似乎是 header 行。

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

修改后的脚本：

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>

注：

请在启用 V8 的情况下使用此 Google Apps 脚本。

使用从电子表格中获取的数据自动填充基于 select 的表单中的字段

Auto-populate fields in a form based on a select with data taken from spreadsheet

javascript

web-applications

google-sheets

google-apps-script

bootstrap-4

修改点：

修改后的脚本：

Google Apps 脚本端：`Code.gs`

HTML&Javascript方：`index.html`

注：

使用从电子表格中获取的数据自动填充基于 select 的表单中的字段

Auto-populate fields in a form based on a select with data taken from spreadsheet

javascript

web-applications

google-sheets

google-apps-script

bootstrap-4

修改点：

修改后的脚本：

Google Apps 脚本端：Code.gs

HTML&Javascript方：index.html

注：

Google Apps 脚本端：`Code.gs`

HTML&Javascript方：`index.html`