如何从Google表格中的元素更新表单?

问题描述 投票:0回答:1

我的Google表格中有一个自定义HTML表单。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  </head>
  <body>
    <form id="myform">
      <div class="form-group">
        <label for="target_row">Row</label>
        <input type="text" class="form-control" name="target_row" id="target_row">        
      </div>
      <div class="form-group">
        <label for="category_name">Статья</label>
        <input type="text" class="form-control" name="category_name" id="category_name" placeholder="Статья">        
      </div>
      <div class="form-group">
        <label for="trans_date">Дата транзакции</label>
        <input type="date" class="form-control" name="trans_date" id="trans_date" placeholder="Дата транзакции">
      </div>
      <div class="form-group">
        <label for="expl_name">Описание</label>
        <input type="text" class="form-control" name="expl_name" id="expl_name" placeholder="Описание">
      </div>
      <div class="form-group">
        <label for="amount_input">Сумма (руб.)</label>
        <input type="number" class="form-control" name="amount_input" id="amount_input" placeholder="00000">
      </div>
      <div class="form-check">
       <input type="checkbox" class="form-check-input" id="new_row">
       <label class="form-check-label" name="new_row" for="new_row">Добавить, как новую запись</label>
     </div>
     <button type="submit" class="btn btn-primary">Подтвердить</button>
     </form>
     <script>     
      document.querySelector("#myform").addEventListener("submit", 
      function(e)
      {
      e.preventDefault();    //stop form from submitting
      console.log(this)
      google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
      }
      );
    </script>
  </body>
</html>

我从安装了onEdit触发器的函数中调用此表单。我想用editCell(e)中的期望值填写表单字段

function editCell(e){
  let sh = e.range.getSheet();
  if(sh.getName() !== "Лист1")return;
  let row = e.range.getRow(); // ---> target_row
  let category = sh.getRange(row, 2).getValue() //---> category_name
  let transDate = sh.getRange(row, 3).getValue() //---> trans_date
  let expl = sh.getRange(row, 4).getValue() //---> expl_name
  let amount = sh.getRange(row, 5).getValue() //---> amount_input
  openCustomForm();
}

function openCustomForm(){
  let html = HtmlService.createTemplateFromFile('form').evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, 'Новое значение')
}

然后手动更新表单,并将新值设置为工作表中的相同单元格,或使用新值添加新行

function addNewItem(form_data){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Лист1');
  let targetRow = form_data.target_row;  
  let category = form_data.category_name;
  let transDate = form_data.trans_date;
  let expl = form_data.expl_name;
  let amount = form_data.amount_input;
  let newRow = form_data.new_row;
  if (newRow === "true"){
    ss.insertRowBefore(5);
    targetRow = 5;    
    }
  let targetRange = sheet.getRange(targetRow, 2, 1, 4);  
  targetRange.setValue(category, transDate, expl, amount);
}

如何使用新值更新表单并获得正确的结果?

我的Google表格中有一个自定义HTML表单。

javascript html google-apps-script google-sheets
1个回答
0
投票

据我所知,您想将电子表格中的值输入到表单中。

© www.soinside.com 2019 - 2024. All rights reserved.