如何在 Google 表格的对话框中添加重置按钮答案

【问题标题】：How to add reset button in the dialog in Google Sheets如何在 Google 表格的对话框中添加重置按钮
【发布时间】：2020-01-04 04:57:16
【问题描述】：

我是脚本新手，但根据我从这个网站学到的知识，我在谷歌表格中整理了一张支票簿资产负债表。

我在其中一个单元格的按钮上附加了一个函数“AddCheck”。它的作用是 - 打开一个对话框，我在其中输入支票详细信息，例如日期、发票编号、金额和供应商名称。然后我点击提交按钮，Google 表格创建一行并添加这些值。

我的问题是如何在提交按钮旁边添加一个按钮，该按钮允许我在不离开对话框的情况下添加新检查详细信息。这样它就会将值添加到单元格中，并清除另一个条目的对话框。

这是我的 AddCheck 函数

    function AddCheck() {

  var spreadsheet = SpreadsheetApp.getActive();
  spreadsheet.getRange('3:3').activate();
  spreadsheet.getActiveSheet().insertRowsBefore(spreadsheet.getActiveRange().getRow(), 1);
  spreadsheet.getActiveRange().offset(0, 0, 1, spreadsheet.getActiveRange().getNumColumns()).activate();
  spreadsheet.getRange('A3').activate();
  spreadsheet.getCurrentCell().setFormula('=A4+1');
  spreadsheet.getRange('G3').activate();
  spreadsheet.getCurrentCell().setValue('Pending');
  spreadsheet.getRange('B3').activate();


  fncOpenMyDialog()

};

这是我的 HTML 对话框文件

<!DOCTYPE html>
<html>
<body>
<form>

<label for="Date">Date :</label>

    <input type='date' name='Date' id="Date" required="required"/>
    <br>
<label for="Invoice">Invoice</label>
    <input type='text' name='Invoice' id="Invoice" required="required"/>

<label for="Amount">Amount</label>
    <input type='text' name='Amount' id="Amount" required="required"/>

<label for="Company">Company</label>
<select name="Class" id="vendor-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

  <script>
      (function () {
        google.script.run.withSuccessHandler(
          function (selectList) {
            var select = document.getElementById("vendor-selector");
            for( var i=0; i<selectList.length; i++ ) {
              var option = document.createElement("option");
              option.text = selectList[i][0];
              select.add(option);
            }
          }
        ).getSelectList();
      }());
    </script>


</select>

<input type="submit" value="Submit" onclick="myFunction(this.parentNode)">
</form>
<p id="CompanyName"></p>

<script>
function myFunction(obj) {
var x = document.getElementById("vendor-selector").value;
document.getElementById("CompanyName").innerHTML = x;
google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}
</script>

</body>
</html>

这个函数调用对话框

function fncOpenMyDialog() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('CheckDetails')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(250);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'Check Details');
};


function functionToRunOnFormSubmit(fromInputForm) {

Logger.log(fromInputForm);

  var ss = SpreadsheetApp.getActive();
  ss.getSheetByName("Checks").getRange(3,3).setValues([[fromInputForm.Class]]);
  ss.getSheetByName("Checks").getRange(3,2).setValues([[fromInputForm.Date]]);
  ss.getSheetByName("Checks").getRange(3,4).setValues([[fromInputForm.Invoice]]);
  ss.getSheetByName("Checks").getRange(3,6).setValues([[fromInputForm.Amount]]);
};

此函数从 Sheet2 获取供应商列表

function getSelectList() 
         {
          var sheet = SpreadsheetApp.openById("141mlnxJBjepKxYCGXHFhz5IIEVnp6T2DDsb_uRgnZzY").getSheetByName('Sheet2');
          var lastRow = sheet.getLastRow();
          var myRange = sheet.getRange("A2:A" + lastRow);
          var data = myRange.getValues();
          Logger.log("Data = " + data); 
          return data;
         };


         function doGet() 
         {
         return HtmlService.createHtmlOutputFromFile('CheckDetails');
         }

感谢您的帮助。

【问题讨论】：

标签： javascript html google-apps-script google-sheets

【解决方案1】：

为了实现这个“提交并继续”功能，您只需要更改前端代码，以便：

有一个新按钮。
单击新按钮后，将执行相同的后端 (GAS) 代码。
GAS 代码执行后对话框不会关闭，但输入元素会重置。

代码修改

在表单标签中添加一个id，以便于选择它。
```
<form id="CheckDetailsForm">
```
在您的 HTML 中创建一个“提交并继续”按钮。为它分配一个 id，以便它可以很容易地被选中。
```
<input type="submit" value="Submit and continue" id="SubmitAndContinueInput" />
```

在script 标签内，为新创建的按钮添加一个事件监听器。

document.getElementById("SubmitAndContinueInput").addEventListener("click", myFunctionContinue);

为新创建的按钮的onclick 事件添加处理函数。此功能与您正在使用的功能非常相似，但是：它将使用preventDefault 来避免表单被错误发送，并在提交时清除表单数据。

function clearForm() {
  document.getElementById('Date').value = "";
  document.getElementById('Invoice').value = "";
  document.getElementById('Amount').value = "";
}

function myFunctionContinue(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(clearForm)
    .functionToRunOnFormSubmit(obj);
}

示例对话框：

编辑

处理“提交并继续”新行：

从AddCheck() 中删除行插入功能。之后我们会处理这个逻辑：
```
function AddCheck() {
  fncOpenMyDialog();
}
```

修改functionToRunOnFormSubmit() 函数，使其处理行插入逻辑。我还稍微清理了代码。如下所示：

function functionToRunOnFormSubmit(fromInputForm) {
  Logger.log(fromInputForm);

  var sheet = SpreadsheetApp.getActive().getSheetByName("Checks");

  sheet.insertRowBefore(3);

  sheet.getRange("A3").setFormula("=A4+1");
  sheet.getRange("B3").setValue(fromInputForm.Date);
  sheet.getRange("C3").setValue(fromInputForm.Class);
  sheet.getRange("D3").setValue(fromInputForm.Invoice);

  sheet.getRange("F3").setValue(fromInputForm.Amount);
  sheet.getRange("G3").setValue("Pending");
}

完整代码

CheckDetails.html

<!DOCTYPE html>
<html>
<body>
<form id="CheckDetailsForm">

<label for="Date">Date :</label>

    <input type='date' name='Date' id="Date" required="required"/>
    <br>
<label for="Invoice">Invoice</label>
    <input type='text' name='Invoice' id="Invoice" required="required"/>

<label for="Amount">Amount</label>
    <input type='text' name='Amount' id="Amount" required="required"/>

<label for="Company">Company</label>
<select name="Class" id="vendor-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

  <script>
      (function () {
        google.script.run.withSuccessHandler(
          function (selectList) {
            var select = document.getElementById("vendor-selector");
            for( var i=0; i<selectList.length; i++ ) {
              var option = document.createElement("option");
              option.text = selectList[i][0];
              select.add(option);
            }
          }
        ).getSelectList();
      }());
    </script>

</select>

<input type="submit" value="Submit" id="SubmitInput" />
<input type="submit" value="Submit and continue" id="SubmitAndContinueInput" />

</form>

<p id="CompanyName"></p>

<script>
document.getElementById("SubmitInput").addEventListener("click", myFunction);
document.getElementById("SubmitAndContinueInput").addEventListener("click", myFunctionContinue);

function clearForm() {
  document.getElementById('Date').value = "";
  document.getElementById('Invoice').value = "";
  document.getElementById('Amount').value = "";
}

function myFunction(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}

function myFunctionContinue(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(clearForm)
    .functionToRunOnFormSubmit(obj);
}
</script>

</body>
</html>

代码.gs

function AddCheck() {
  fncOpenMyDialog()
}

function fncOpenMyDialog() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('CheckDetails')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(250);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'Check Details');
}

function functionToRunOnFormSubmit(fromInputForm) {
  Logger.log(fromInputForm);

  var sheet = SpreadsheetApp.getActive().getSheetByName("Checks");

  sheet.insertRowBefore(3);

  sheet.getRange("A3").setFormula("=A4+1");
  sheet.getRange("B3").setValue(fromInputForm.Date);
  sheet.getRange("C3").setValue(fromInputForm.Class);
  sheet.getRange("D3").setValue(fromInputForm.Invoice);

  sheet.getRange("F3").setValue(fromInputForm.Amount);
  sheet.getRange("G3").setValue("Pending");
}

function getSelectList() {
  var sheet = SpreadsheetApp.openById("141mlnxJBjepKxYCGXHFhz5IIEVnp6T2DDsb_uRgnZzY").getSheetByName('Sheet2');
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow);
  var data = myRange.getValues();
  Logger.log("Data = " + data); 
  return data;
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('CheckDetails');
}

【讨论】：

这正是我想要的。谢谢，学到了很多。
@HemangParikh 不用担心！ :) 请考虑upvoting/accepting，以防我的回答对您有用。祝你有美好的一天！
所以，一个问题是当我单击 SubmitAndContinue 时添加数据后它不会创建新行，每次它只是修改同一行。在添加新数据之前，我需要它在第三行上方添加一行。我尝试在清除文档后添加行脚本，但不起作用。
所以基本上我需要在放入新数据之前再次运行 AddCheck 函数，所以它会添加一行，设置支票号码的公式和其他东西。
您先生太棒了，清理了其他文件，代码看起来又短又甜，做了很多不必要的编码。效果很好，主要代表。