html 如何使用uuid和电子表格中的数据更新隐藏的输入字段

taor4pac  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(138)

我只是简化了我的问题,希望它会更容易理解。我需要的形式,以更新其金额自动当用户选择一个产品代码。和所有的参考号码,以自动填写的uuid从后端。这是我的第一个问题上栈,我真的希望有人能帮助。
金额FIELD〉〉根据表中的产品代码更新参考FIELD〉〉获取uuid并将其输入字段。
电子表格链接:https://docs.google.com/spreadsheets/d/1CK1bAcrTAOabkzK0YxliVFFh8VFPYIYXDy6ocvnGuGY

代码.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();
  //Logger.log(data);

  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'
  }
}

/**
 * Handle post request
 */
function doPost(e){
  const postData = e.parameter
  const uuid = Utilities.getUuid()
  //const image = createFile(postData.data, postData.profile)
  //save to spreadsheet
 
  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!")
}

索引.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 A"</option>
              <option value="LC3">"Product Code A"</option>
            </select>
          </div>
          <!-- AMOUNT -->
          <div>
            <label for="amount">Amount</label>
            <input type="text" id="amount" required>
            </div>
          <!-- REFERRENCE-->
          <div>
            <label for="reff">Reference</label>
            <input type="text" id="reff" required>
            </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("select",getEstimate);
document.getElementById("fn").addEventListener("input",getUuid);
    
    function getEstimate(){
      var productCode = document.getElementById("productcode").value;
      if(productCode.length > -1){
      
      google.script.run.withSuccessHandler.getCost(Productcode);
    
      document.getElementById("amount").value = cost;
    
    }

function getUuid(){
  const uuid = Utilities.getUuid.getValue()
    
      referenceNo = uuid;
    
    }
        
    </script>
xwbd5t1u

xwbd5t1u1#

Google Apps脚本服务(包括Utilities)不能直接从客户端JavaScript调用。在服务器端代码(.gs文件)上声明调用这些服务的函数,并通过使用google.script.runwithSuccessHandler调用回调(作为参数传递的JavaScript函数)来处理服务器端函数输出。有关详细信息,请参阅https://developers.google.com/apps-script/guides/html/communication
代码有一些错误,首先花一些时间学习客户端-服务器通信,然后创建一个更基本的“mcve”,学习如何调试Google Apps脚本Web应用程序。
相关(最近的排在最前面)

参考文献

相关问题