Question

采用以下格式： https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec

第二个输入“ JOINT”中列出的选项是从此工作表生成的： https://docs.google.com/spreadsheets/d/1_LSdBkvw5Z6L4ZQP5qZccLEfekNVRCeKQRLLb9Vm4eM/edit#gid=285745421

提交的表单如下所示： https://docs.google.com/spreadsheets/d/1_LSdBkvw5Z6L4ZQP5qZccLEfekNVRCeKQRLLb9Vm4eM/edit#gid=0

如您所见，表单可以正确读取选项（W 01，W 02等），但是在提交表单时，工作表会读取提交的选项，如Option 01，Option 02，依此类推

问题是，是否有任何方法可以使工作表读取表格中所示的选项（W 01，W 02，..），并且还有任何方法可以动态更新表格中的列表而不是进行设置html代码中指示的许多选项（从选项01到选项08）

预先感谢

Code.gs

function doGet() {
return HtmlService.createTemplateFromFile('index.html')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)

try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
var sheet = doc.getSheetByName(sheetName)

var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues() 
[0]
var nextRow = sheet.getLastRow() + 1

var newRow = headers.map(function(header) {
  return header === 'timestamp' ? new Date() : e.parameter[header]
})

sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

return ContentService
  .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow 
}))
  .setMimeType(ContentService.MimeType.JSON)
}

catch (e) {
return ContentService
  .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
  .setMimeType(ContentService.MimeType.JSON)
}

finally {
lock.releaseLock()
}
}


function createInnerHTML(){
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("CHOICES");
var namesValues = names.getRange(2, 2, names.getMaxRows() - 
1).getValues(); 
return namesValues;
}

index.html

<!DOCTYPE html>
<html>
<body>

<style>
</style>

<form name="submit-to-google-sheet">

<input name="email" type="email" placeholder="Email" required>

<div class="ss-q-title">JOINT
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>

<? var namesValues= createInnerHTML(); ?>  
<div><select name="JOINT" id="JOINT" aria-label="JOINT" required>
<option value=""></option>
<option value="OPTION 01"><?= namesValues[0][0]?></option>
<option value="OPTION 02"><?= namesValues[1][0]?></option>
<option value="OPTION 03"><?= namesValues[2][0]?></option>
<option value="OPTION 04"><?= namesValues[3][0]?></option>
<option value="OPTION 05"><?= namesValues[4][0]?></option>
<option value="OPTION 06"><?= namesValues[5][0]?></option>
<option value="OPTION 07"><?= namesValues[6][0]?></option>
<option value="OPTION 08"><?= namesValues[7][0]?></option>
</select></div>

<input type="submit" name="submit" value="Submit" id="Submit" class="jfk- 
button jfk-button-action "></form>

<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
 })
</script>

<script src="https://wzrd.in/standalone/formdata-polyfill"></script>
<script src="https://wzrd.in/standalone/promise-polyfill@latest"></script>
<script src="https://wzrd.in/standalone/whatwg-fetch@latest"></script>

</body>
</html>

Answer 1

问题：

为每个value提供option属性会使提供的值（而不是选项的文本内容）提交给服务器

解决方案：

省略value元素的option属性。

摘要：

<option><?= namesValues[0][0]?></option>

参考：

Html Element#option § Atrributes

值
如果选择此选项，则此属性的内容表示将与表单一起提交的值。如果省略此属性，则该值取自option元素的文本内容。

有什么办法可以动态更新选项列表

1 个答案:

问题：

解决方案：

摘要：

参考：