如何实现表单自动填充UUID及根据产品代码更新金额字段？

实现表单两个核心功能：

• 用户选择产品代码时，自动从指定Google表格获取对应金额并填充至Amount字段
• 自动从后端获取UUID并填充至Reference字段

一、自动填充金额功能修复 #

问题点： #

1. 选择框事件监听错误：使用select事件，应改为change事件触发选择变化
2. google.script.run调用方式错误：withSuccessHandler需传入回调函数处理返回值
3. 变量名大小写不匹配：后端函数参数为productCode，前端传参大小写不一致
4. 未正确接收后端返回的金额值并赋值到输入框

修复逻辑： #

绑定选择框的change事件，调用后端getCost函数时通过withSuccessHandler接收返回的金额，再赋值到Amount输入框。

二、自动生成UUID填充Reference功能修复 #

问题点： #

1. 前端无法直接调用后端的Utilities.getUuid，必须通过google.script.run调用后端函数
2. 监听了不存在的fn元素，应在页面加载时自动获取UUID
3. 赋值方式错误：需设置DOM元素的value属性，而非直接覆盖变量

修复逻辑： #

在后端新增生成UUID的函数，页面加载时调用该函数获取UUID并填充到Reference输入框。

Code.js #

const APP_NAME = "PRODUCT SALES APP"
var url="https://docs.google.com/spreadsheets/d/1CK1bAcrTAOabkzK0YxliVFFh8VFPYIYXDy6ocvnGuGY/edit#gid=1312844985";

/**
 * Link the html file to another one
 */
function link(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent()
}

/**
 * Handle get request
 */
function doGet() {
  return HtmlService.createTemplateFromFile("index.html").evaluate().setTitle(APP_NAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function getCost(productCode){
  var ss= SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Products");
  var data = ws.getRange(1, 1, ws.getLastRow(), 6).getValues();

  var codesList = data.map(function(r){ return r[2]; });
  var costList = data.map(function(r){ return r[4]; });

  var position = codesList.indexOf(productCode);
  if (position > -1){
    return "₦" + costList[position].toFixed(2);
  } else{
    return 'Unavailable'
  }
}

// 新增生成UUID的后端函数
function generateUuid() {
  return Utilities.getUuid();
}

/**
 * Handle post request
 */
function doPost(e){
  const postData = e.parameter
  const uuid = Utilities.getUuid()
  var ss= SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("PRODUCT SALES");
  ws.appendRow([new Date(),uuid, postData.category, postData.gender_type, postData.product_class, postData.product_code, postData.first_name, postData.last_name, postData.delivery_address, postData.phone_number, postData.email_address, postData.platinum_id])
  const html = `Thanks for your submission! \n${uuid}`
  return HtmlService.createHtmlOutput(html).setTitle("Success!")
}

index.html #

<div>
  <label for="product_code">Product Code</label>
  <select name="product_code" id="productcode" required>
    <option value="" disabled selected>Select Product Code</option>
    <option value="LC1">Product Code A</option>
    <option value="LC2">Product Code B</option>
    <option value="LC3">Product Code C</option>
  </select>
</div>
<!-- AMOUNT -->
<div>
  <label for="amount">Amount</label>
  <input type="text" id="amount" required readonly> <!-- 设置readonly防止用户手动修改 -->
</div>
<!-- REFERRENCE-->
<div>
  <label for="reff">Reference</label>
  <input type="text" id="reff" required readonly> <!-- 设置readonly防止用户手动修改 -->
</div>
<!-- Submit button -->
<div>
  <input type="submit" value="BUY NOW">
</div>
</form>

<!-- Link the javascript -->
<?!= link('js'); ?>
</body>
</html>

js.html #

<script>
const productAmount = document.getElementById("amount")
const referenceNo= document.getElementById("reff")

// 产品选择变化时触发金额获取
document.getElementById("productcode").addEventListener("change", getEstimate);

// 页面加载完成后自动获取UUID
window.addEventListener("load", function() {
  google.script.run.withSuccessHandler(function(uuid) {
    referenceNo.value = uuid;
  }).generateUuid();
});

function getEstimate(){
  var productCode = document.getElementById("productcode").value;
  if(productCode){
    google.script.run.withSuccessHandler(function(cost) {
      productAmount.value = cost;
    }).getCost(productCode);
  } else {
    productAmount.value = "";
  }
}
</script>

内容的提问来源于stack exchange，提问作者Yomi Platinum