如何解决根据所选内容自动填充表单中的字段，并从电子表格中获取数据 Google Apps脚本端：Code.gs HTML＆Javascript面：index.html
我已经使用GAS完成了一个Web应用程序，该应用程序将提交的数据发送到电子表格A。
还有一个选择选项，可从A列中的另一个电子表格B（“ xxx”）动态获取一些数据。
这是代码：
在代码中。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的解决方案）
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>
解决方法
我相信您的目标如下。
- 当选择的选项，这是列“A”的值，您想从列“B”和“C”的值设置为与只读输入标记。
修改点：
- 在此修改中，当
address()在<?!= address(); ?>上运行时，将列“ A”到“ C”的值设置为选项。列“ B”和“ C”的值设置为定制属性。在HTML方面，您将按预期disabled="disabled"添加2个输入标签。 - 选择其他选项时，使用Java脚本将“ B”和“ C”列的值设置为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>
注意：
- 请在启用V8的情况下使用此Google Apps脚本。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。